配置参考 \ 内容外观配置配置Tinymce编辑区内的内容外观

此页更新时间:2019-02-17 23:41

此页英文文档:https://www.tiny.cloud/docs/configure/content-appearance/

配置Tinymce编辑区内的内容外观:

body_class&body_id(为编辑区body指定类或id)

在经典模式,为编辑区iframe内生成的body设置一个class或id。

该class或id可用于设置css样式配合下面的content_css使用。

取值:String

body_class: 'my_class'
body_class: 'my_id'

可为多个实例分别指定class和id

body_class: 'elm1=my_class, elm2=my_class'
body_id: 'elm1=my_id, elm2=my_id2'

content_css(为编辑区指定css文件)

如果你希望在经典模式中,编辑区也可以有与周围相同的样式,此选项可以帮你实现。

引入一个css文件,实现编辑区css自定义。

通常配合body_class&body_id使用。

取值:String

content_css : 'myLayout.css'

注意:如果使用相对路径,相对的是当前调用TinyMCE的html,而不是TinyMCE的根目录。

也可以引入多个css文件:

content_css : 'mycontent.css,mycontent2.css'
content_css : ['mycontent.css', 'mycontent2.css']

content_css_cors

设为true,则content_css可以跨域引入css文件。

取值:true/false

content_style(直接为编辑区编写css)

在此选项内编写的css将直接注入到编辑器创建的iframe内部(在head内创建style),其创建的样式不会与内容一起被提交,可以放心使用。

取值:String

tinymce.init({
    selector: '#textarea1',
    content_style: "p {margin: 10px; border: 5px solid red; padding: 3px}"
});

inline_boundaries(内置样式开关)

为保证编辑器输出相对干净的代码,主题内会定义一些样式来实现某些功能。

如不想使用内置样式,设为false即可。

取值:true/false

默认:true

inline_boundaries : false

inline_boundaries_selector(使用内置样式的元素)

可通过它来指定inline_boundaries可应用于哪些元素。默认:a[href],code。也可以加入其它内联元素,如:b,strong,i,em。

如果你设置了除默认那俩的其它元素,还需要去定义他们的样式,设置样式的方法可参考content_css部分

取值:String

默认:a[href],code

inline_boundaries_selector: 'a[href],code,b,i,strong,em'

text_color(颜色工具相关配置)

颜色工具包含 文字颜色/背景色 两个按钮。他们又包含一个颜色选择列表和一个调色盘。

取值:String

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

color_cols(颜色选择列表的列数)

指定颜色网格的列数。行数是根据定义的颜色数除以列数计算的。

textcolor_cols和textcolor_rows在TinyMCE 5.0中已被移除。

取值:Number

color_cols: 4
注意:该值必须为Number,string是无效的。

color_map(自定义颜色选择列表的颜色)

自定义颜色网格中的颜色及颜色名称,该值为一个数组(后面会有例子)。

取值:Array

custom_colors(调色盘开关)

该设置可禁用颜色工具的调色盘。

取值:true/false

默认:true

custom_colors: false

这三个配置的例子

tinymce.init({
    selector: '#textarea1',
    color_cols: 7,
    custom_colors: false,
    color_map: [
            "000000", "Black",
            "993300", "Burnt orange",
            "333300", "Dark olive",
            "003300", "Dark green",
            "003366", "Dark azure",
            "000080", "Navy Blue",
            "333399", "Indigo",
            "333333", "Very dark gray",
            "800000", "Maroon",
        ],
});

visual(网格线开关)

用于网格线的开关。

网格线的作用是,如果表格border为0,TinyMCE会在编辑区内的表格周围添加虚线框作为视觉辅助。(so为啥大家都把它汉化成网格线?)

取值:true/false

默认值:true

visual: false

visual_anchor_class(为编辑区锚点指定class)

为编辑区锚点指定class。

取值:String

visual_anchor_class: 'my-custom-class'

visual_table_class(为编辑区表格指定class)

为编辑区表格指定class。

取值:String

visual_table_class: 'my-custom-class'

下一节:生成代码配置