【超详细】Tinymce富文本使用教程

Tinymce基础使用手册

1. 开始

官网文档：www.tiny.cloud/docs/ 

社区版及开发版官方最新打包地址：www.tiny.cloud/get-tiny/self-hosted/ 

汉化包：tinymce.ax-z.cn/static/tiny/langs/zh_CN.js

2. 快速使用

• 引入tinymce脚本

• 将tinymce初始化为页面的一部分

我们需要使用tinymce.init()来进行初始化；tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定tinymce要绑定的内容容器，div和textarea都是可以的）

例如：

<div id = "tinydemo"></div>
<script >
    tinymce.init({
        selector: '#tinydemo'
    }); 
</script>

• 获取tinymce富文本框内容的几种方式：

 如果当前页面只有一个编辑器

        获取内容：tinyMCE.activeEditor.getContent()

        设置内容：tinyMCE.activeEditor.setContent("需要设置的编辑器内容")

如果当前页面有多个编辑器（下面的“[0]”表示第一个编辑器，以此类推）

        获取内容：tinyMCE.editors[0].getContent()

        设置内容：tinyMCE.editors[0].setContent("需要设置的编辑器内容")

获取不带HTML标记的纯文本内容

var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
//纯文本内容
var text = activeEditor.selection.getContent({
    'format': 'text'
});

textarea可通过表单提交

<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
</form>
<script>
      tinymce.init({
        selector: '#mytextarea'
      });
</script>

3. 常用配置

selector

渲染DOM，必填，String值，使用CSS选择器。

language

指定语言，String，值区分大小写。

language_url

汉化包路径

height

设置整个编辑器的高度，包括菜单栏、工具栏和状态栏,如果提供了数字，TinyMCE 以像素为单位设置高度。如果提供了字符串，TinyMCE 假定该值是有效的 CSS，并将编辑器的高度设置为字符串值。这允许备用单元，例如%，em，和vh。(测试%不起作用)

readonly

只读，Boolean，将编辑器设置成只读模式，不可编辑。

plugins

指定需加载的插件，String或Array，此插件必须已存在plugins目录内；若使用String值，多个插件用空格分隔；默认不会加载任何插件，支持自写插件。

可选插件配置：www.tiny.cloud/docs/plugins/opensource/advlist/

toolbar

自定义工具栏，Boolean或String或Array；为false时将关闭工具栏；String值时用于自定义工具栏，例：toolbar:"link | preview"，值中可插入“|”分组；支持多级工具栏,例：toolbar1:"",toolbar2:""；官网：www.tiny.cloud/docs/configure/editor-appearance/#toolbar

menu

自定义菜单。例：

tinymce.init({
    selector: '#tinydemo',
    menu: {
        file: {title: '文件', items: 'newdocument'},
        edit: {title: '编辑', items: &