生成代码配置 | TinyMCE中文文档中文手册

配置参考 \ 生成代码配置更改编辑器处理内容HTML的方式，创建干净易读、可维护的代码

此页更新时间：2019-02-22 21:33

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

更改编辑器处理内容HTML的方式，创建干净易读、可维护的代码：

allow_conditional_comments（允许条件注释）
allow_html_in_named_anchor（允许name锚点）
allow_unsafe_link_target（允许不安全的目标链接）
convert_fonts_to_spans（font标签转span）
custom_elements（自定义元素）
doctype
element_format（元素为XHTML/HTML）
encoding（转XML）
entities（实体）
entity_encoding（实体类型）
fix_list_elements（修复列表元素）
forced_root_block（强制根节点块元素）
forced_root_block_attrs（为“强制根节点块元素”添加属性）
invalid_elements（无效元素）
invalid_styles（无效样式）
keep_styles（保持样式）
protect（代码保护）
remove_trailing_brs（删除最尾的br）
schema（模式）
valid_children（有效子元素）
valid_classes（有效class）
valid_styles（有效样式）
valid_elements（有效元素）
extended_valid_elements（扩展有效元素）

allow_conditional_comments（允许条件注释）

代码内是否保留条件注释，默认不保留。

条件注释被用于针对IE各个版本做不同的处理，但微软IE10及以上版本已经不再支持条件注释，所以，此选项多用于兼容老旧浏览器（IE9以下）。

取值：true/false

默认：false

allow_conditional_comments: true

allow_html_in_named_anchor（允许name锚点）

named anchor就是用name来做标记的锚点，如：<a name="tagId"></a>

这种写法在很早就不推荐使用了，如要实现锚点，请用id="tagId"来实现。

取值：true/false

默认：false

allow_html_in_named_anchor: true

allow_unsafe_link_target（允许不安全的目标链接）

默认下，所有target="_blank"的链接都会加入一个rel="noopener"（禁止该链接打开的子窗口访问window.opener）。这样做是出于安全考虑的，可以防止钓鱼网站利用window.opener读取父窗口信息。

强烈建议该值保持默认，除非你确信将其设为true不会对安全造成影响。

取值：true/false

默认：false

allow_unsafe_link_target: true

convert_fonts_to_spans（font标签转span）

font标签早就被弃用了，我实在想不出该选项还健在的意义……设为false，则代码中的font标签会被保留。

取值：true/false

默认：true

convert_fonts_to_spans: false

custom_elements（自定义元素）

该设置允许你自定义HTML元素，例如在不支持html5的页面中加入header,footer等支持。这样就可以在代码中处理非html元素。

如果希望元素是类span的内联元素而不是类div的块元素，在自定义标记前加英文符号的~。

取值：String

tinymce.init({
    selector: '#textarea1',
    extended_valid_elements : 'mycustomblock[id],mycustominline',
    custom_elements : 'mycustomblock,~mycustominline',
});

doctype

设置编辑区iframe的doctype。

修改doctype可以改变对html的解析规则，除非你理解修改它的意义，否则可能会导致布局异常等情况。doctype用法可参考w3c关于doctype的介绍。

取值：String

tinymce.init({
    selector: '#textarea1',
    doctype: '<!DOCTYPE html>',
});

element_format（元素为XHTML/HTML）

设置元素是XHTML模式还是HTML模式。如果设置成HTML模式，则 将被更改为 。

取值：xhtml/html

默认：xhtml

element_format: 'html'

encoding（转XML）

如设置此选项为xml，则提交TinyMCE编辑区的内容时，内容将自动转换成XML字符串，而不是转以后的内容。字符<,>,&,",都将是非转义的。

默认：该选项为禁用

取值：String

encoding: 'xml'

entities（实体）

此选项包含一个将被转义的实体（entity）列表，奇数项是字符code，偶数项是名称。

基本实体<,>,&,',",将始终被转换成其对应的实体。但单引号和双引号只在属性值和被<,>包裹中的文本节点内编码。

此设置仅对高于\u007E (unicode为126)的字符进行编码。

取值：String

tinymce.init({
    selector: '#textarea1',
    entities : '160,nbsp,162,cent,8364,euro,163,pound',
});

entity_encoding（实体类型）

此选项控制TinyMCE如何处理实体/字符的转换方式。

基本实体<,>,&,',",将始终被转换成其对应的实体。但单引号和双引号只在属性值和被<,>包裹中的文本节点内编码。

此设置仅对高于\u007E (unicode为126)的字符进行编码。

名称	说明
named	字符将根据前面的entities配置来转换实体。例如将空格转换成
numeric	字符将转换为数字实体。如空格将编码为
raw	所有字符都将以非实体形式保存，除了XML默认实体<,>,&,"

取值：String

默认：named

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

fix_list_elements（修复列表元素）

用于修复列表元素（UL、OL）中非规范的写法和错误。一般是不合规的嵌套或缺失。此选项默认情况下是没有开启的，如果开启可能会导致一些问题。

例如：

<ol>
    <li>a</li>
    <ol>
        <li>b</li>
        <li>c</li>
    </ol>
    <li>e</li>
</ol>

将会被修复为：

<ol>
    <li>a<ol>
            <li>b</li>
            <li>c</li>
        </ol>
    </li>
    <li>e</li>
</ol>

取值：true/false

默认：false

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

forced_root_block（强制根节点块元素）

此选项的开启能令所有非块元素或文本节点都被块元素包裹。例如：

文字将会自动在外层增加一个P标签：文字

如禁用此选项，则输入时将永远不会生成P标签或自动生成br，仅当按shift+回车时生成P标签。

提醒：如果不使用P标签，可能会削弱编辑器的功能。（原话是这么说的，具体会怎么削弱没有测试。）

取值：String/false

默认：p

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

forced_root_block_attrs（为“强制根节点块元素”添加属性）

为“forced_root_block”指定的块元素添加属性

取值：Object

tinymce.init({
    selector: '#textarea1',
    forced_root_block_attrs: {
        'class': 'myclass',
        'data-something': 'my data',
    },
});

invalid_elements（无效元素）

当编辑器清理代码时需要删除掉的元素。此选项是一个字符串，多个元素用英文逗号来分隔。

取值：String

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

推荐阅读：valid_elements（有效元素）和 extended_valid_elements（扩展有效元素）

invalid_styles（无效样式）

此选项用于限制元素的样式。有两种格式：

String：可简单的定义全局无效的样式。
Object：更复杂灵活的定义方式，可为某个元素单独指定无效的样式。

简单实现全局定义

取值：String

tinymce.init({
    selector: '#textarea1',
    invalid_styles: 'color font-size'
});

特定元素定义

取值：Object

tinymce.init({
    selector: '#textarea1',
    invalid_styles: {
        '*': 'color font-size', //全局无效样式
        'a': 'background', // 链接禁用背景样式
    }
});

keep_styles（保持样式）

当用户按下回车时，新一行将保持当前文本的样式。默认开启。

取值：true/false

默认：true

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

protect（代码保护）

保护指定的内容不可被编辑器编辑。

该选项可接受一个数组，数组值为正则表达式构成，与正则相匹配的内容将不会出现在编辑区内。（被隐藏起来，HTML源码中依然存在）

取值：Array

tinymce.init({
    selector: '#textarea1',
    protect:[
        /\<\/?(if|endif)\>/g, //<if> & </endif>
        /\<xsl\:[^>]+\>/g,    //<xsl:...>
        /<\?php.*?\?>/g,      //php代码
    ]
});

DEMO：

remove_trailing_brs（删除最尾的br）

删除块元素末尾的 。

gecko和webkit浏览器会注入这些元素使插入符号放在空的块元素中。此功能会尝试删除这些元素，并保留用户放置的标签。

取值：true/false

默认：true

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

schema（模式）

该选项可指定生成的代码是html4还是html5标准。

该值默认是html5，可选值还有：html4、html5-strict。

html5模式是完整的HTML5规范，它兼容旧的HTML4。html5-strict是HTML5的严格模式，它只允许HTML5规范的元素，不包括已经被移除标准的元素。html4模式则是包括完整的HTML4过渡规范。在需要兼容老旧浏览器时，可能会用到该选项。

取值：html5/html4/html5-strict

默认：html5

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

valid_children（有效子元素）

控制指定的父元素中可用存在哪些子元素。

默认TinyMCE会删除或拆分任何非HTML5内容或HTML过渡内容。例如，P不能是另一个P的子元素。此选项的默认值是由当前schema（模式）控制的。

此选项的语法是：父元素[子元素|子元素|子元素],父元素[子元素|子元素]

父元素前可用“+”或“-”代表从默认中追加或从默认中删除。

取值：String

下面这个示例将展示该选项的用法：

tinymce.init({
    selector: '#textarea1',
    valid_children : '+body[style],-body[div],p[strong|a|#text]',
});

+body[style]：表示追加style为body的子元素

-body[div]：表示将div从body的子元素中删除

p[strong|a|#text]：表示强制p的子元素只包含strong、a和纯文本。

valid_classes（有效class）

限制元素所能拥有的class值。此选项有两种格式

String：可简单的定义全局有效的class。
Object：更复杂灵活的定义方式，可为某个元素单独指定有效的class。

简单实现全局定义

取值：String

tinymce.init({
    selector: '#textarea1',
    valid_classes: 'class1 class2 class3'
});

特定元素定义

取值：Object

tinymce.init({
    selector: '#textarea1',
    valid_classes: {
        '*': 'class1 class2 class3', //全局可以拥有的class值
        'a': 'class4 class5', // 链接可以拥有的class值
    }
});

valid_styles（有效样式）

可为每个元素指定允许使用的样式，只有特定的样式才能在style属性中存在，写法同上。

取值：Object

tinymce.init({
    selector: '#textarea1',
    valid_styles: {
        '*': 'border,font-size',
        'div': 'width,height'
    }
});

valid_elements（有效元素）

你可以用它来定义编辑器只保留哪些元素，使用此功能可限制用户提交内容的格式，如留言板，论坛互动等场景，使用该选项可以返回HTML的一个子集。

此选项是一个以英文逗号分隔的元素列表字符串。每一个元素都可指定其允许的属性。该选项的默认规则集是配置选项“schema”的值指定的规范，默认是HTML5。

如果只想为几个项目添加或改变某些行为，可以使用extended_valid_elements

该配置支持的规则控制符

名称	说明
@	为在其后的元素指定此规则。如@[attr1\|attr2]将为所有元素启用属性attr1、attr2。但element1,@[attr1\|attr2],element2,element3则是为element2,element3启用属性attr1、attr2。如在extended_valid_elements中使用此规则，则仅对扩展的元素有效。
,	用于元素间的分隔
/	分隔同一意义的元素，第一个出现的为有效元素，其它将被第一个替换。如strong和b均为加粗，strong/b表示保留strong将所有b转为strong。
\|	用于属性间的分隔
[属性]	为元素定义属性
!属性	该属性为元素必须拥有的属性，如果元素没有该属性，则会被编辑器舍弃。如a[!href]表示所有不包含href属性的a将全部舍弃。
属性=值	为属性设置默认值，如：a[target=_blank]
属性:值	将属性强制指定为指定值，如：border:0
属性<值?值	验证属性值是否为<后的选项，每个选项用英文?分隔，如：arget<_blank?_self
+	不存在子节点就将其打开，如：+a
-	移除空元素如：-strong
#	如果该元素是空的，就填充 如：#p
!	删除没有属性的元素，但其内部文本不会被删除。

注：通配符*,+,?可用于元素或属性名称的匹配。

特殊变量

名称	说明
{$uid}	生成唯一ID。例如，“p[id:$uid]”。

使用*[*]可表示所有元素的所有属性，通常在配置invalid_elements时使用。

取值：String

tinymce.init({
    selector: '#textarea1',
    valid_elements : 'a[href|target=_blank],strong/b,div[align],br'
});

以上配置告诉TinyMCE只保留a、strong、div、br这几个元素，其它全部舍弃。同时将b元素转换为strong元素，将a的target的默认值设为_blank并保留href属性，保留div的align属性。

注意：不要在配置中大量罗列规则以存在的属性，这有可能导致TinyMCE在其它元素重复输出该属性。

取值：String

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

extended_valid_elements（扩展有效元素）

该选项与valid_elements非常相似，区别是该选项被用于扩展现有规则集，而valid_elements是缩小默认规则集。

默认规则集是由schema决定的。

取值：String

tinymce.init({
    selector: '#textarea1',
    extended_valid_elements : 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});

该示例将替换现有的img规则（包括全局元素规则）

下一节：格式化配置