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

此页更新时间:2019-10-14 10:36

此页英文文档: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'
});

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,
});

下一节:外观配置