1.快速集成

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

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

第2步：引入TinyMCE脚本

<script src="你的网站路径/tinymce/tinymce.min.js"></script>

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

<!DOCTYPE html>
<html>
<head><script src='tinymce.min.js'></script><script>tinymce.init({selector: '#mytextarea'});</script>
</head><body>
<h1>TinyMCE快速开始示例</h1><form method="post"><textarea id="mytextarea">Hello, World!</textarea></form>
</body>
</html>

第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);}}
}

TinyMCE使用指导相关推荐

php tinyme_黄聪：TinyMCE 4 增强添加样式、按钮、字体、下拉菜单和弹出式窗口
我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...
tinymce php,TinyMCE和php问题
好吧,昨天我终于让TinyMCE在我的网站上工作了. 我还下载了一个提供代码突出显示的插件,但插件似乎引起了一些"混淆". 正如我们所知道的,TinyMCE使用作为用户输入.那么, ...
提高期——SLA实践指导秘籍
前言: 第二遍看提高期的SLA文档,开始提高期的第一个项目. 感受: 这个秘籍和自己看的<番茄工作法图解>非常像,写作风格和内容量上. 从大脑的功能分析,为什么要这样做.我们的学习方法符合 ...
c语言程序设计第二版第五章课后答案甘勇,郑州工程技术学院副院长甘勇来校讲学和指导工作...
12月12日,郑州工程技术学院副院长甘勇一行莅临我校讲学和指导工作.黄河交通学院评建办公室主任汤迪操.教务处处长贾宗璞,智能工程学院领导班子.主任及骨干教师参加了本次会议,会议由智能工程学院党总支书记 ...
如何利用大数据指导市场营销
本文来自网易云社区. 在数字时代,人们的生活方式和思考方式已经发生了变化,同样人们的消费观念也发生了变化.它赋予消费者更广阔的视野,同时也提高了消费者的自主意识.互联网使得很多信息都公开化,消费者不仅 ...
共阳极数码管动态扫描c语言,《C语言编程实训》实训指导书三
1 C 语言编程实训语言编程实训实训指导书三实训指导书三适应专业应用电子技术适应专业应用电子技术广州康大职业技术学院自动化系广州康大职业技术学院自动化系二二 0 一一 0 年十一月年十一月 ...
初中计算机指导教师意见,初中信息技术教学计划（推荐3篇）
初中信息技术教学计划由好范文网的会员投稿精心推荐,小编希望以下3篇范文对你的学习工作能带来参考借鉴作用. 第1篇:初中信息技术教学计划下面由好范文网的作者为你提供初中信息技术教学计划的写法. 一.教 ...
TinyMCE的使用-安装
TinyMCE安装非常简单,它可以被初始化为<form>标签中的<textarea>,当提交表单时,TinyMCE编辑器的内容将作为<form>表单的一部分被提交. ...
vue 集成富文本tinymce
开发环境 1. vscode 开发语言 1. vue 2. javaScript 插件安装 1. npm install tinymce -S 2. 可以使用里面的文件, 下载后可以在node_mod ...

TinyMCE使用指导