TinyMCE是什么？

此页更新时间：2023-10-10 09:40

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（右键）

【推荐】为vue开发者整合的tinymce组件（右键）

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

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

Q&A

对于文档近两年停更的说明

此文档诞生于我儿子出生之前的那段时间，晚上在家对照官方英文文档逐条翻译，文档完成前后一个多月的时间，后续随着版本更新逐步完善。

造成此汉化文档停更的原因主要有两个：

一、疫情期间，本来家里四口人只有我一人上班维持生计，但由于疫情在家，收入断崖下跌，无奈只能寻找其它赚钱生计。

二、作为一个后端开发，虽然前端基础略懂，但毕竟已属于个人爱好，在前端内卷各种框架层出不穷的这个年代，我并非职业前端，没精力去追这些新技术（实际情况是：对三四线城市来说，学到巨牛也无法带来收入的提升，目前我接触的前端都是vue加会点css，基础都很差，却不影响实现业务）。作为文档作者，自认为已经无法解答各位在各种框架中使用的问题，已经无法胜任文档编写工作。

三、当时我的想法是按官方文档结构一比一复刻，所以导航及外观均仿照官方文档制作。但官方竟然突然大改版，界面及文档目录全部改变，以至于为了升级版本，我要做的不是仅是更新最新内容，整个文档要完全重做一遍，如此巨大的工作量，忙于生计的我已经无力完成。

另外对于程序员的35岁魔咒我也谈谈自己的看法，本人虽然40+，但深刻体会到家有一老如有一宝的重要性，有些突发问题或是极端情况，只有有经验的开发才会有想法去解决，在产品的设计上，老程序员考虑问题更全面，后期留的坑更少，我没在一线城市呆过，也许35岁魔咒的确存在，但只存在于那些天天加班到深夜的大城市，对三四线来说，按点下班是常态，但偶尔加班没加班费，工资是真的低，也就是你们的三分之一或二分之一的样子，要不年轻人都往大城市跑呢，留不住人。

综上，感谢各位对此文档的包容与理解，此文档将作为tinymce5的历史记录保存，与当前这台服务器同寿。

——一个把开发当爱好却没赚过什么钱的非主流程序员 于 2023年10月10日

tinymce收费吗？

tinymce主程序及自带的大部分插件均提供社区开源版，可免费使用且可商用。tinymce的主要盈利模式为【付费插件及拓展服务】，有关付费项目的列表，请参考：https://www.tiny.cloud/pricing

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：经典模式

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

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

上例中包含本站原创插件：插入百度地图、首行缩进、设置行高、图片批量上传；插件详情参见导航“更多插件”。
上例公式插件由网友（HGC）提供。
导入word插件由网友提供，更多网友原创插件详情参见导航“更多插件”。

再来个彩色图标的例子。

▲