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

此页更新时间：2020-03-08 21:56

此页英文文档：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'

placeholder（占位文本）

5.2.0新增。

Tiny终于开始支持placeholder了，作用是编辑器没内容时，显示一段默认文字。

取值：String 

tinymce.init({
    selector: '#textarea1',
    placeholder: '在这里输入文字',
});

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'

下一节：生成代码配置

▲