TinyMCE中文文档中文手册

TinyMCE是什么？

此页更新时间：2019-11-05 10:30

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言。

官网及文档：www.tiny.cloud（右键）

官网下载：www.tiny.cloud/get-tiny/self-hosted/（右键）

Github：github.com/tinymce（右键）

注：此中文文档自TinyMCE v5开始编写，对v4不做介绍。本站所用版本为v5

我汉化的中文语言包：zh_CN.js（右键另存为，编码为UTF-8，如果用浏览器直接打开可能会无法识别编码格式，显示为乱码，保存即可无影响）

DEMO-1：内联模式

看上面那段简介↑↑↑，鼠标点一下，是不是可以编辑？js如下：

tinymce.init({
    selector: '#tinydemo', //容器，可使用css选择器
    language:'zh_CN', //调用放在langs文件夹内的语言包
    toolbar: false, //隐藏工具栏
    menubar: false, //隐藏菜单栏
    inline: true, //开启内联模式
    plugins: [ 'quickbars','link','table' ], //选择需加载的插件
    //选中时出现的快捷工具，与插件有依赖关系
    quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
});

内联模式最大的好处，是内容完全继承自外层定义的样式，真正实现了"所见即所得"。但要注意，请小心使用杀伤力比较大的自定义CSS，因为这样可能会覆盖TinyMCE控件的CSS，导致编辑器显示异常。上面的代码高亮框本来是黑色主题，被TinyMCE的插件CSS污染成了白色主题……😂

DEMO-2：经典模式

下方是几乎开启全部功能的经典模式，为把这一大堆按钮尽量按类摆放，我已经尽力了……

<img style="float: right;max-width:40%;" src="/static/img/qqgroup.jpg" />TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 <h4>关于此中文文档（手册）</h4> 该文档是<a href="./">TinyMCE的使用手册、进阶用法的说明书</a>，包含入门用法、插件使用、配置参数使用方法、内置方法等等。它并非100%照搬英文文档进行翻译，我会对很多自认为不完善的地方进行删改或加入新的内容，使之比原文档更易于学习。 弄这个中文手册的初衷：从前一直使用kindeditor，但苦于官方已N久没有更新，不得不到处寻找合适自己的编辑器，用过很多之后，最终感觉还是TinyMCE比较顺手，主要是它能简能繁，适用非常全面。 老外的东西是不错的，就是没有中文手册文档，拦住好多像我一样英语比较差的国人，限制了它的知名度，希望这份中文文档能帮助TinyMCE走进中国。 关于汉化进度：由于是利用晚上不看孩子的时间每天写一点（每个参数都尽量亲自测试效果），所以不会很快，好在孩子诞生前汉化了很多内容，基本涵盖日常使用。 我深知自己的英语水平比较烂，如有任何翻译错误，还请邮件告诉我：Lcard@qq.com PS：热心网友建的QQ交流群：689501894 ——译者兼该文档制作人：Lc（Lcard）

此实例为官方提供的一个DEMO，代码展示出来会导致首页臃肿，所以我就不贴了，感兴趣的朋友直接右键看源码，我已做了中文注释，更多说明请参考文档。

上例中包含本站原创插件：插入百度地图、首行缩进、设置行高、图片批量上传；插件详情参见导航“更多插件”。

再来个彩色图标的例子。