配置参考 \ 集成配置编辑器的基本配置

此页更新时间：2020-02-18 18:31

此页英文文档：https://www.tiny.cloud/docs/configure/integration-and-setup/

编辑器的基本配置：

auto_focus（自动获得焦点）

该参数用于让编辑器加载完成后自动获得光标焦点，值为true时为当前实例，为string时是指定其他编辑的实例ID。

取值：TRUE / String 

tinymce.init({
    selector: '#textarea1',
    auto_focus: true,
});

base_url（设置主程序结构所在url）

5.0.8新增。

如果你的tinymce.js和其它应该放到与它同级的文件夹（比如插件皮肤等）因为某种原因没有放在一起。比如tinymce.js你是用cdn引入的，但皮肤和插件你想放在项目里之类的场景，那么用此参数可以解决你的问题。

取值：TRUE / String 

tinymce.init({
    selector: '#textarea1',
    base_url: '/my/tinymce/dir',
});

cache_suffix（缓存请求后缀）

该参数可在TinyMCE加载js和css文件时，在URL请求后面自动加上指定的后缀，多用于解决缓存问题。

取值：String

tinymce.init({
    selector: '#textarea1',
    cache_suffix: '?v=5.0.0',
});

content_security_policy（内容安全策略）

为编辑器的iframe内容设置自定义内容安全策略。了解详情可自行搜索：HTML5内容安全策略（CSP）。

取值：String

tinymce.init({
    selector: '#textarea1',
    content_security_policy: "default-src 'self'",//仅允许当前域名，不包括子域名
});

external_plugins（引入站外插件）

可用于引入本站外部提供的插件，TinyMCE将根据插件加载规则加载指定URL的插件。当从CDN加载TinyMCE或希望TinyMCE主目录与自定义插件分开时，可使用此配置。

其值因为一个对象，形如{插件名:插件URL}

取值：Object

tinymce.init({
    selector: '#textarea1',
    external_plugins: {
        'testing': 'http://www.testing.com/plugin.min.js',
        'maths': 'http://www.maths.com/plugin.min.js'
    }
});

hidden_input（开关内联模式用于存内容的‘隐藏input’）

默认tinymce在开启内联模式（inline）会生成一个‘隐藏的input’用于执行保存动作时存放编辑器的内容。此选项默认开启，如果不需要生成这个input，可以设为false禁用此功能。

取值：TRUE / FALSE

默认：TRUE 

tinymce.init({
    selector: '#textarea1',
    inline: true,
    hidden_input: false,
});

init_instance_callback（初始化结束后执行）

此配置选项允许你在编辑器初始化完成后，执行自己的回调函数。此函数支持一个参数，该参数为编辑器实例对象的引用。

取值：Function

tinymce.init({
    selector: '#textarea1',
    init_instance_callback : function(editor) {
        console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
    }
});

setup（初始化前执行）

与init_instance_callback类似，不过这个是在开始前执行一个自定义函数。

取值：Function

tinymce.init({
    selector: '#textarea1',
    setup: function(editor) {
        console.log("ID为: " + editor.id + " 的编辑器即将初始化.");
    },
});

plugins（指定需加载的插件）

为TinyMCE指定要加载的插件，此插件必须已存在plugins目录内，多个插件用空格分隔。默认TinyMCE不会加载任何插件。

取值：String

tinymce.init({
    selector: '#textarea1',
    plugins : 'advlist autolink link image lists charmap print preview'
});

readonly（只读模式）

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

取值：true / false

tinymce.init({
    selector: '#textarea1',
    readonly: true,
});
以上是初始化配置参数，该参数只可读不可改。如果想要关闭当前编辑器的只读模式，重设该参数是无用的，需要借助如下命令：
tinymce.editors['编辑器id'].setMode('design');//开启编辑模式
tinymce.editors['编辑器id'].setMode('readonly');//开启只读模式

selector

都看到这儿了就不用多说了吧……

取值：String

tinymce.init({
    selector: '#textarea1',
});

suffix（后缀）

5.0.8新增。

详细解释一下这东西，tinymce加载插件的方式很特别，如果主程序叫tinymce.js，它在加载插件时就会去找插件文件夹里的plugin.js；如果主程序叫tinymce.min.js，它在加载插件时就会去找plugin.min.js。看到这里不知道你懂没懂，这个参数简单说就是用来设置“.min”这个部分的。

取值：String

tinymce.init({
    selector: '#textarea1',
    suffix: '.min',
});

target（使用Node替代selector）

当不方便使用css选择器指定编辑器容器的时候，例如容器需要动态创建，这种情况，可以通过直接赋予其Node对象来创建编辑器。

注意：selector优先级要高于target，如要使用target，则参数中不要出现selector。

取值：Node（HTML节点对象）

var el = document.querySelector('#tinydemo');
tinymce.init({
    target: el,
});

下一节：外观配置

▲