1.快速集成

快速集成部分参考tiny中文文档 http://tinymce.ax-z.cn/

第1步：下载TinyMCE
TinyMCE支持多种使用方式，但是本人还是建议使用最传统的方式，把相关资源下载到本地，放置到项目中。最新版的下载地址https://www.tiny.cloud/get-tiny/ 这里下载的是默认配置版，就是插件、主题、皮肤都是官方默认指定的。

第2步：引入TinyMCE脚本

第3步：将TinyMCE初始化为页面的一部分

第4步：通过正常表单POST保存内容
当form提交时，TinyMCE会将内容塞进textarea，你可以通过正常的post方法获取到编辑器中的内容，行为与普通textarea完全一致。

2.常见问题处理

问题处理代码截取自sitesCMS源码，完整代码可查阅sitesCMS源码 https://gitee.com/xhhxb/sitesCMS

2.1.汉化

问题现象
TinyMCE默认是英文的
解决方案
官方提供了语言包，从这个地址下载对应的汉化语言包 https://www.tiny.cloud/get-tiny/language-packages/
配置语言

language: 'zh-Hans',//汉化语言包

2.2.字体选项没有中文

问题现象
即便使用了汉化包，但是在选择字体的下拉菜单中还是没有中文，这个仍然是配置的问题。
解决方案

font_family_formats: "微软雅黑=\'微软雅黑\';宋体=\'宋体\';黑体=\'黑体\';仿宋=\'仿宋\';楷体=\'楷体\';隶书=\'隶书\';幼圆=\'幼圆\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New=courier new,courier;Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//字体选项

2.3.页面刷新不显示

问题原因
sitesCMS中是通过pjax进行页面局部刷新，刷新时会导致tinymce的init方法得不到执行，导致编辑器不能正常显示。
解决方案

//先手动销毁，避免刷新页面不能正常创建
tinymce.remove('#editor');
//下面再创建
tinymce.init({... ...});

2.4.表单提交没有值

问题原因
提交表单时没有及时将编辑器的内容填充到textarea中
解决方案

//ajax提交表单自动同步textarea的问题
editor.on('change',function(){ editor.save(); });

2.5.全屏被遮挡问题

问题原因
sitesCMS后台使用的是layui框架，tinymce全屏时头部和菜单部分会被遮挡，原因是这两部分的z-index比较大，位于最上层，导致遮挡下面的内容。
解决方案

//监听全屏插件的全屏事件，手动处理全屏被遮挡文档
editor.on('FullscreenStateChanged', function(data){
   if(data.state){
      console.log('全屏');
      $(".layui-header").css("z-index","0");
      $(".layui-side").css("z-index","0");
   } else {
      console.log('取消全屏');
      $(".layui-header").removeAttr("style");
      $(".layui-side").removeAttr("style");
   }
});

2.6.内容被过滤

问题原因
sitesCMS中使用了Jsoup对表单内容进行过滤，如果配置中没有把需要保存的标签放置白名单中会导致部分内容或样式被过滤而不能保存。
解决方案

/**
* 放开需要保存的标签
*/
.addAttributes("video", "src", "controls", "width", "height", "poster", "preload", "muted", "loop", "autoplay")
.addAttributes("source", "src", "type")

2.7.使用表情保存

问题原因
表情字符是4个字节，而mysql中的utf-8最大支持3个字节的存储，而如果想要存储4个字节的字符就会报错，不只是emoji表情，复杂一些的文字也会出现这种情况。
解决方案
调整对应表字段的编码为utf8bm4即可

2.8.图片和视频上传

图片和视频上传都需要启用对应的插件，并提供对应的配置和编码处理，这个代码和逻辑稍微复杂一点，详细处理方案参考sitesCMS源码https://gitee.com/xhhxb/sitesCMS

images_upload_url: '/file/uploadImg4TinyMCE',//图片上传地址
file_picker_types: 'media',//只在视频上传时提供上传按钮
file_picker_callback: function(callback, value, meta) {
    //在视频上传弹窗提供一个文件上传按钮
    if (meta.filetype == 'media') {
        //callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
        let filetype = '.mp4';
        let url = '/file/uploadVideo4TinyMCE';
        //模拟出一个input用于添加本地文件
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', filetype);
        input.click();

        input.onchange = function () {
            let file = this.files[0];
            let xhr, formData;
            console.log(file.name);
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', url);
            xhr.onload = function () {
                let json;
                if (xhr.status != 200) {
                    layer.msg("文件上传异常，请检查文件格式和大小");
                    return;
                }
                json = JSON.parse(xhr.responseText);
                if (!json || typeof json.location != 'string') {
                    layer.msg(json.msg);
                    return;
                }
                callback(json.location);
            };
            formData = new FormData();
            formData.append('file', file, file.name);
            xhr.send(formData);
        }
    }
}