H5引入TinyMCE
TinyMCE官网
http://tinymce.ax-z.cn/
界面演示
插件资源包内容
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tinymac-Demo</title>
<link rel="stylesheet" href="">
</head>
<body>
<button type="button" id="getmsg">获取内容</button>
<button type="button" id="putmsg">填充内容</button>
<a href="./tiny-msg.html" title="" target="_black">内容查看</a>
<br><br>
<textarea id="mytextarea">Hello, World!</textarea>
<!-- <div id="mytextarea"></div> -->
</body>
</html>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="./tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#mytextarea',
language:'zh_CN', //汉语化
menubar:false, //隐藏顶部菜单
height: 800, //编辑器高度
toolbar_mode : 'wrap',
// 引入插件
plugins: ['table ', 'image ', 'link', 'fullscreen', 'lists','insertdatetime', 'preview', 'searchreplace', 'wordcount'],
// 工具栏
toolbar: ['cancel searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample fontsize','hr bullist numlist link image charmap preview anchor pagebreak insertdatetime table emoticons forecolor backcolor fontfamily styles fullscreen'],
// 字体配置
font_family_formats: "宋体='宋体';仿宋='仿宋';微软雅黑='微软雅黑';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
// 字体配置
font_size_formats: '12px 14px 16px 18px 20px 24px 26px 28px 30px 32px 34px 36px 38px',
// 行高配置
line_height_formats: '1 1.2 1.5 2 2.5',
indent_use_margin: true,
// 设置内容默认样式
content_style: 'body { font-family:微软雅黑,Arial,sans-serif; font-size:16px;line-height:2 }',
// 右键功能配置
contextmenu: 'copy paste | link image inserttable | cell row column deletetable',
// 自定义样式
style_formats: [
{
title: '首行缩进',
block: 'p',
styles: { 'text-indent': '2em' }
},
{
title: 'Headings',
items: [
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Heading 4', format: 'h4' },
{ title: 'Heading 5', format: 'h5' },
{ title: 'Heading 6', format: 'h6' }
]
},
{
title: 'Inline',
items: [
{ title: 'Bold', format: 'bold' },
{ title: 'Italic', format: 'italic' },
{ title: 'Underline', format: 'underline' },
{ title: 'Strikethrough', format: 'strikethrough' },
{ title: 'Superscript', format: 'superscript' },
{ title: 'Subscript', format: 'subscript' },
{ title: 'Code', format: 'code' }
]
},
{
title: 'Blocks',
items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Pre', format: 'pre' }
]
},
{
title: 'Align',
items: [
{ title: 'Left', format: 'alignleft' },
{ title: 'Center', format: 'aligncenter' },
{ title: 'Right', format: 'alignright' },
{ title: 'Justify', format: 'alignjustify' }
]
}
],
// 上传配置
images_upload_url: '/demo/upimg.php',
images_upload_base_path: '/demo',
branding: false,
promotion: false,
});
$('#getmsg').click(function(){
console.log(tinymce.activeEditor.getContent());
})
$('#putmsg').click(function(){
tinymce.activeEditor.setContent("20221220")
})
</script>