有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

javascript 炮渣日记 3周前 (11-16) 38次浏览 已收录 0个评论 扫描二维码

TinyMCE是一个开源(LGPL-2.1)的富文本编辑器,TinyMCE不仅易于扩展,它也非常灵活。大多数功能是简单的配置,而核心编辑器有近100定制选项,从简单的修改到最神秘的边缘。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

1、快速开始

https://github.com/tinymce/tinymce

在你的HTML页面<head>中包括下面这行代码。也可以在GitHub上下载,但需要自己创建发布包。

<script src=’https://cloud.tinymce.com/stable/tinymce.min.js’></script&gt;

在页面中创建TinyMCE编辑器容器<textarea id=’mytextarea’>

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

包含下面脚本,初始化TinyMCE,使用tinymce.init()方法,当中包括一个selector属性,值为一个CSS选择器。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

完成以上的操作,一个简单的富文本编辑器就初始化完成了。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

2、基本使用

①自定义工具栏按钮

toolbar属性自定义按钮,多个自定义按钮用空格分割,通过editor.addButton()方法添加到编辑器。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

②自定义菜单

在自定义按钮中使用menu属性添加一个菜单列表,值是一个数组。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

除了这些意外还有更多的配置,可以实现高度的定制功能按钮。

③HTML5格式化

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

对内容格式的定制还有其他配置属性,具体可以查看文档,在这里就不多做解释了。

④内联模式

inline设置为true,默认false,这样简单的内联就配置好了,点击容器内元素即可激活工具栏。

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

tinymce中文(JavaScript库的富文本编辑器)基本使用教程

⑤国际化语言

language这个选项允许您指定的语言出现在TinyMCE的用户界面。也就是说,工具栏按钮和菜单项。默认情况下,TinyMCE将使用我们英语作为语言的接口。

如果你想使用英语以外的其他语言,请遵循以下步骤:

  1. 从这里下载您希望使用的语言包(
    https://www.tinymce.com/download/language-packages/)。
  2. 语言文件解压到你的tinymce/langs文件夹(或者项目任意位置)。
  3. 在language选项中配置语言代码,如中文简体zh_CN;语言文件在不在tinymce/langs文件夹中,需要URL来确定语言文件位置,如language_url : ‘/languages/zh_CN.js’。

https://www.tinymce.com/docs/

TinyMCE还有很多功能我就不一一说明了,如主题、插件、文件选择、上传等,内置很多方法和事件,功能还是非常强大的,有兴趣的朋友,可以在官网深入了解下,同时也兼容移动端设备。高级功能有从word粘贴、管理文件和图像、检查拼写、嵌入丰富的媒体等。

如果你有更好、使用的插件想要和我们分享,请评论告诉我,感谢您的分享。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址