TinyMCE 富文本编辑器的使用实例指导

• 前言
  富文本编辑器有很多的选择：
  “UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala”
  之前一直使用的是 UEditor，因为太繁琐，并且官方早已不维护；
  在比较它们的有确定后，鄙人选择了 —— 【 TinyMCE 官网及文档】
  在此进行一旦整理，方便大家的集成使用，谢谢指摘 …

• 环境

框架：	ThinkPHP5.1.2
版本：	tinyMCE5.4.2
系统：	Win10/CentOS7.2
浏览器：	google、fireFox

• 【推荐阅读—— TinyMCE 中文手册】

---

◆ 使用步骤：

①. 下载并引入TinyMCE脚本

<!-- 引入TinyMCE脚本 -->
<script type="text/javascript" src="__TINYMCE__/js/tinymce/tinymce.min.js"></script>

②. 使用tinymce.init()来进行初始化

• 自定义核心配置 js 源码：

<script>
    tinymce.init({
        selector: '#mz-tinymce',
        language:'zh_CN', //调用放在langs文件夹内的语言包
        height: 300,
        //plugins: ['table','preview' ], //选择需加载的插件
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern  autosave bdmap indent2em autoresize lineheight formatpainter axupimgs',
        toolbar1: 'code undo redo| forecolor backcolor bold italic underline strikethrough hr|' +
        '|alignleft aligncenter alignright alignjustify|table image media| insertdatetime preview fullscreen',
        min_height: 400,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        importcss_append: true,
        autosave_ask_before_unload: false,
        convert_urls:false,
        //图片上传操作
        images_upload_handler: function (blobInfo, succFun, failFun) {
            var xhr, formData;
            var file = blobInfo.blob();//转化为易于理解的file对象
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            // image_upload_url 为定义的上传路径，查看 “application\cms\view\layouts\cms.html”
            var image_upload_url = "/api/upload/img_file";
            xhr.open('POST', image_upload_url);
            xhr.onload = function() {
                var json;
                if (xhr.status != 200) {
                    failFun('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                if (!json || json.status != 1) {
                    failFun('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                var fullImgUrl = json.data.full_url;
                succFun(fullImgUrl);
            };
            formData = new FormData();
            formData.append('file', file, file.name );//此处与源文档不一样
            xhr.send(formData);
        },
        //处理表单ajax提交不保存信息的情况
        setup: function(editor){
            editor.on('change',function(){ editor.save(); });
        },
    });
</script>

③. html 简单示例 (通过正常表单POST保存内容)

<form method="post">
		<div class="layui-input-block div-article-content">
            <textarea id="mz-tinymce" name="content"></textarea>
        </div>
</form>

④. 实际效果截图：

---

◆ 附录技巧

1. TinyMCE对本地化的支持（汉化技巧，可转化为中文模式）
2. convert_urls（自动转换URL）
   关闭此选项，TinyMCE将不会自动处理URL，也就是说，插入的URL原本是什么就是什么，不会自动转换相对或绝对路径，这样会导致内容URL极其混乱。所以，默认此选项是开启的。

convert_urls: false

• 详情参考—— 配置参考 \ URL处理配置

3. 【ajax提交表单自动同步textarea的问题】
   传统点击 submit 提交按钮会自动同步内容，但ajax之类的用事件提交会导致内容没有同步，暂时的解决办法是在初始化参数中setup参数里加入事件监听，让他自动同步

setup: function(editor){ 
  editor.on('change',function(){ editor.save(); });
},