tiny win10怎么设置中文(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的默认模式,其界面与其他流行的富文本编辑器样式功能一致。

tiny win10怎么设置中文(TinyMCE5.0功能强大所见即所得的富文本编辑器)(1)

经典模式

内联模式

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

tiny win10怎么设置中文(TinyMCE5.0功能强大所见即所得的富文本编辑器)(2)

内联模式

沉浸模式

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

tiny win10怎么设置中文(TinyMCE5.0功能强大所见即所得的富文本编辑器)(3)

沉浸模式

自定义界面

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页