TinyMCE富文本编辑器的使用

一、引入TinyMCE

1、获取自己的API密钥 地址
2、下载tinymce.min.js到本地 地址
3、下载汉化js zh_CN.js 放到 langs目录下 汉化包下载
4、引入

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script>
<script src="tinymce.min.js"></script>
<script src="tinymce/js/tinymce/langs/zh_CN.js" type="text/javascript" charset="utf-8"></script> <!--汉化-->

二、初始化为页面

tinymce.init({
  selector: '#mytextarea',
  language:'zh_CN',//注意大小写
});

三、html

<h1>TinyMCE示例</h1>
<form method="post">
	<textarea id="mytextarea">Hello, World!</textarea>
</form>

四、页面效果

五、工具栏配置

tinymce.init({
  	selector: '#mytextarea',
	language:'zh_CN',//注意大小写
	toolbar: 'undo redo | styleselect | bold italic | link image'//工具栏配置
});

字段	解释
newdocument	新文档
bold	加粗
italic	斜体
underline	下划线
strikethrough	删除线
alignleft	左对齐
aligncenter	居中对齐
alignright	右对齐
alignjustify	两端对齐
styleselect	格式设置
formatselect	段落格式
fontselect	字体选择
fontsizeselect	字号选择
cut	剪切
copy	复制
paste	粘贴
bullist	项目列表UL
numlist	编号列表OL
outdent	减少缩进
indent	增加缩进
blockquote	引用
undo	撤销
redo	重做/重复
removeformat	清除格式
subscript	下角标
superscript	上角标

六、移动端

<meta name="viewport" content="width=device-width, initial-scale=1">

tinymce.init({
  selector: 'textarea',
  mobile: {
    menubar: true
  }
});

七、TinyMCE官网

中文文档
英文文档