TinyMCE5.0 功能强大、所见即所得的富文本编辑器

前沿技术

  在线编辑器对网站开发人员是再熟悉不过了,比较有名的Ueditor(百度),Kindeditor,Simditor,CKEditor,wangEditor,Suneditor,ContentTools,ewebeditor,summernote等等。

   TinyMCE5.0 是一个功能强大且灵活的富文本编辑器,可以嵌入到任意Web应用中使用,UI精美、功能模块多、可按需加载配置。

  介绍

   TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器,目前流行的各种浏览器,采用JavaScript/ECMAScript开发,主要特性包括主题/模板,多语言(包括简体中文),通过插件的方式进行扩展。功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),AJAX。另一特点是加载速度非常快。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。

  Github地址

  https://github.com/tinymce/tinymce使用方法

  在<head>中引入官网的tinymce.min.js文件到项目(引用官网js文件需要申请API_KEY)

  <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script>建议下载一份代码到本地 / 创建一个TinyMCE实例初始化

  <!DOCTYPE html><html><head> <script src="/tinymce/tinymce.min.js"></script> <script>tinymce.init({selector:'textarea'});</script></head><body> <textarea>Next, use our Get Started docs to setup Tiny!</textarea></body></html>经典模式

  经典模式也是TinyMCE的默认模式,其界面与其他流行的富文本编辑器样式功能一致。

经典模式

  内联模式

  将编辑视图与阅读视图合二为一,当其被点击后,元素才会被编辑器替换,而不是编辑器始终可见。

内联模式

  沉浸模式

  在该模式下,编辑器以轻巧的方式呈现。此模式提供了将常用的链接、图像、表格等以快速插入的方式。

沉浸模式

  自定义界面

   用户可以轻松自定义菜单、工具栏,也可以方便的修改编辑器的大小、外观、按钮等等。

   TinyMCE v5 的默认皮肤是“oxide”,它包含浅色版本和深色版本。默认oxide是浅色版。下面的例子将使用深色版皮肤。

  tinymce.init({ selector: '#tinydemo', skin: 'oxide-dark',}); 使用content_css自定义可编辑区域。

  tinymce.init({ selector: '#tinydemo', content_css : content_css : ['mycontent.css', 'mycontent2.css'] ,}); 粘性工具栏(或停靠工具栏),在向下滚动网页直到不再可见编辑器时,将工具栏和菜单停靠在屏幕顶部。

  tinymce.init({ selector: '#tinydemo', toolbar_sticky : true,}); 其它功能参考官网

  插件使用

   TinyMCE真正强大之处在于它对插件完善的。它本身自带了许多实用的插件,而社区则提供了更多优秀的插件。而插件的开发,正是得益于TinyMCE预留接口的友好。

   由于大多数人通过TinyMCE Cloud安装TinyMCE或下载软件包,他们错误地认为所有插件都是TinyMCE“核心”的一部分。虽然所有插件(不包括专业功能)都包含在这些包中,但每个插件都需要在配置中加载才能使用。实际上,如果您使用自定义程序包下载选项,则只能使用列表中选择包含的插件。

  advlist 高级列表anchor 锚点插件autolink 自动链接autoresize 编辑器自适应autosave 自动存稿bbcodecharmap 特殊字符code 编辑源码codesample 代码示例directionality 文字方向emoticons 表情插件fullpage 文档属性fullscreen 全屏help 帮助hr 水平分割线image 插入编辑图片importcss 引入cssinsertdatetime 插入日期时间legacyoutput 输出HTML4link 超链接lists 列表插件media 插入编辑媒体nonbreaking 插入不间断空格noneditable 不可编辑元素pagebreak 插入分页符paste 粘贴插件preview 预览print 打印quickbars 快速工具栏save 保存searchreplace 查找替换spellchecker 拼写检查tabfocus tab切入切出table 表格插件template 内容模板textcolor 文字颜色textpattern 快速排版toc 目录生成器visualblocks 显示元素范围visualchars 显示不可见字符wordcount 字数统计

标签: 前沿技术