TinyMCE中文文档中文手册

您所在的位置:网站首页 elementui中文官网官网 TinyMCE中文文档中文手册

TinyMCE中文文档中文手册

#TinyMCE中文文档中文手册| 来源: 网络整理| 查看: 265

此页更新时间:2021-06-08 09:45

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 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插件由网友提供,更多网友原创插件详情参见导航“更多插件”。

再来个彩色图标的例子。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3