使用 valid_elements 来定义允许的元素和属性,使用 invalid_elements 来阻止特定元素,使用 extended_valid_elements 来添加或修改规则。对于粘贴时的过滤,使用 PastePreProcess 和 PastePostProcess 事件或 PowerPaste 插件选项。

禁用或剥离 HTML 格式

每当内容被设置、粘贴或检索时,TinyMCE 都会根据 schema 验证和清理内容。schema 定义了允许的元素和属性,任何超出 schema 的元素或属性在内容解析时都会被移除。此页面上的内容过滤选项用于配置该 schema:

  • valid_elements 替换允许的元素和属性集合。

  • extended_valid_elements 添加到现有集合中,而不是替换它。

  • invalid_elements 从内容中移除特定元素,保留其文本。

在这些选项中,只有 valid_elements 和 invalid_elements 会限制内容。extended_valid_elements 扩展了默认 schema,因此它用于允许额外元素而不是剥离它们。有关其语法和示例,请参阅下方的选项描述。

要了解底层验证和解析机制的参考,请参阅 Schema 和 DomParser API 文档。

要将内容限制为有限的格式子集,将 valid_elements 设置为仅应保留的元素和属性。任何不在列表中的元素都会被移除,但其文本内容会被保留。

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  valid_elements: 'p,br,a[href],strong/b,em/i'
});

此配置保留段落、换行符、链接(及其 href 属性)以及粗体和斜体文本,将 b 转换为 strong,将 i 转换为 em。所有其他元素,如标题、表格和内联样式,都会被剥离,其文本会被保留。

当被剥离的元素是块级元素(如标题)时,其中包含的文本将失去父块级元素,并被重新包装在由 forced_root_block 设置的块级元素中,默认情况下为 p。例如,上述配置中移除的 <h1> 会返回为包含原始标题文本的 <p>。

要仅移除特定格式而保留其他所有内容,请使用 invalid_elements。

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  invalid_elements: 'strong,b,em,i,u,span'
});

要从粘贴的内容中移除所有格式,以便仅插入纯文本,请将 paste_as_text 设置为 true。

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  paste_as_text: true
});

有关 valid_elements、extended_valid_elements 和 invalid_elements 所使用的元素和属性语法的完整参考,请参阅下方的选项描述。要自定义内容的样式和定义方式而不是限制它们,请参阅 Content formats。

allow_conditional_comments

此选项允许您指定编辑器是否应解析和保留条件注释。

类型: Boolean

默认值: false

可能的值: true,false

示例:使用 allow_conditional_comments

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  allow_conditional_comments: true
});

allow_html_in_comments

allow_html_in_comments 选项允许在编辑器内容中的注释中保留类 HTML 内容。默认情况下,TinyMCE 会移除包含类 HTML 内容的注释作为安全措施。

类型: Boolean

默认值: false

可能的值: true,false

将此选项设置为 true 可能会使您的应用程序面临 XSS 漏洞。DOMPurify 维护者已确定在注释中允许类 HTML 内容时存在潜在的安全风险。仅当您信任内容来源并了解安全影响时,才启用此选项。

示例:使用 allow_html_in_comments

以下示例展示了默认情况下如何处理包含 HTML 的注释(移除)以及如何配置 TinyMCE 以保留它们:

tinymce.init({
  selector: 'textarea',
  allow_html_in_comments: true,  // 启用注释中的 HTML
});

注释行为示例

在 allow_html_in_comments: false(默认)的情况下,初始化后的编辑器内容将是:

<section>
<h1>Some content</h1>
<h1>Some additional content</h1>
</section>

设置 allow_html_in_comments: true 后,编辑器初始化后的内容将为:

<section>
<h1>Some content</h1>
<!--
  <div>This is my comment content</div>
-->
<h1>Some additional content</h1>
</section>

allow_html_in_named_anchor

此选项允许您指定编辑器是否应解析并保留命名 anchor 标签内的 html。

类型: Boolean

默认值: false

可能的值: true,false

示例:使用 allow_html_in_named_anchor

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_html_in_named_anchor: true
});

allow_mathml_annotation_encodings

此选项允许在编辑器中使用特定的有效 MathML 注释编码列表。

类型: Array of Strings

默认值: [](空数组)

示例:使用 allow_mathml_annotation_encodings

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_mathml_annotation_encodings: [ 'wiris', 'application/x-tex' ]
});

allow_unsafe_link_target

默认情况下,所有具有 _blank target 的链接都将获得 rel 属性的 noopener 值。这将禁用从点击后打开的子标签页/窗口访问 window.opener 对象。如果您不关心这一点,可以通过将其设置为 false 来禁用此选项。尽管 我们不建议这样做,除非您有其他方法来保护使用 target 设置为 _blank 的指向外部页面的链接。

类型: Boolean

默认值: false

可能的值: true,false

示例:使用 allow_unsafe_link_target

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  allow_unsafe_link_target: true
});

br_in_pre

此选项允许您禁用 TinyMCE 在 pre 标签内按下回车键时的默认行为。默认情况下,在 pre 标签内按回车键会在插入点生成一个 br 标签。例如:

<pre>This is inside<br>a pre tag.</pre>

然而,当 br_in_pre 设置为 false 时,TinyMCE 不会插入 br 标签,而是拆分 pre 标签。例如:

<pre>This is inside</pre><pre>a pre tag.</pre>

当此选项设置为 false 时,shift+enter 将插入一个 br 标签。

类型: Boolean

默认值: true

可能的值: true,false

示例:使用 br_in_pre

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  br_in_pre: false
});

convert_fonts_to_spans

此选项在 TinyMCE 5.10 中已被弃用,可能会在未来的 TinyMCE 主要版本中被移除。

如果您将此选项设置为 true,TinyMCE 会将所有 font 元素转换为 span 元素,并生成 span 元素而不是 font 元素。应使用此选项以获得更符合 W3C 标准的代码,因为 font 元素已被弃用。

类型: Boolean

默认值: true

可能的值: true,false

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  convert_fonts_to_spans: false
});

custom_elements

此选项允许您为编辑器指定非 HTML 元素。

通过这种方式,您可以在 HTML 编辑器中处理非 HTML 元素。如果您希望元素表现为 span 元素而不是 div 元素,可以在元素名称前加上 ~。

类型: String 或 Object

简单字符串格式

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  extended_valid_elements: 'mycustomblock[id],mycustominline',
  custom_elements: 'mycustomblock,~mycustominline' // Notice the ~ prefix to force a span element for the element
});

记录格式

custom_elements 选项和 addCustomElements API 支持记录结构。键是元素名称,值是具有以下属性的规范对象:

extends(字符串)

新元素继承其默认属性的元素名称。使用 extends 还会将新元素添加为有效子元素, wherever 扩展元素有效。例如,extends: "div" 使自定义元素成为块级元素,并允许其在 wherever div 允许的地方使用。

attributes (字符串数组)

属性名称列表或预设 @global。每个字符串可以是属性名称或预设 @global,后者会扩展为 schema 的全局属性(参见属性预设:@global)。例如:["@global", "data-type", "data-id"]。

children (字符串数组)

有效的子元素名称或预设列表。每个字符串可以是元素名称或预设 @blocks、@phrasing 或 @flow 之一。参见 HTML Element Sets: html4、HTML Element Sets: html5 和 HTML Element Sets: html5-strict 以获取每个 schema 的确切元素集。

padEmpty (布尔值)

默认值为 false。当设置为 true 时,元素在保存时会填充内容(例如,不换行空格),以确保其始终具有一些内容。用于不能为空的元素。

componentUrl (字符串)

要加载到编辑器中的 Web Component 脚本的 URL。当自定义元素是需要脚本渲染的 Web Component 时使用。

属性预设:@global

attributes 数组中的 @global 预设会扩展为 schema 的全局属性。确切集合取决于 schema 类型:

HTML Element Sets: html4

TypeExpected

@blocks

address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, center, dir, isindex, noframes

@phrasing

a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, acronym, applet, basefont, big, font, strike, tt

@flow

Same as @blocks + @phrasing

@global (attributes)

id, accesskey, class, dir, lang, style, tabindex, title, role, xml:lang

HTML Element Sets: html5

TypeExpected

@blocks

address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map, center, dir, isindex, noframes

@phrasing

a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg, acronym, applet, basefont, big, font, strike, tt

@flow

Same as @blocks + @phrasing

@global (attributes)

id, accesskey, class, dir, lang, style, tabindex, title, role, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, translate, itemprop, itemscope, itemtype, xml:lang

HTML Element Sets: html5-strict

TypeExpected

@blocks

address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map

@phrasing

a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg

@flow

Same as @blocks + @phrasing

@global (attributes)

id, accesskey, class, dir, lang, style, tabindex, title, role, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, translate, itemprop, itemscope, itemtype

使用预设(如 @blocks、@phrasing 和 @flow)的 custom_elements 示例

tinymce.init({
  selector: "textarea",
  // 使用 custom_elements 选项添加自定义元素
  custom_elements: {
    // 自定义元素 'foo-bar' 扩展自 'div',包含属性 'attr1' 和 'attr2'
    "foo-bar": {
      extends: "div",
      attributes: ["attr1", "attr2"],
    },
    // 自定义元素 'foo-baz' 扩展自 'span',允许子元素 '@phrasing' 和 'foo-child'
    "foo-baz": {
      extends: "span",
      children: ["@phrasing", "foo-child"],
    },
    // 自定义元素 'foo-child' 没有特定配置
    "foo-child": {},
  },
  // 也可以使用 addCustomElements API 添加自定义元素
  setup: (editor) => {
    editor.on("preinit", () => {
      editor.schema.addCustomElements({
        // 自定义元素 'hey-bar' 扩展自 'div',包含属性 'attr1' 和 'attr2' 以及所有全局属性
        "hey-bar": {
          extends: "div",
          attributes: ["@global", "attr1", "attr2"],
        },
        // 自定义元素 'hey-baz' 扩展自 'span',允许子元素 'hey-child' 以及所有 phrasing 内容
        "hey-baz": {
          extends: "span",
          children: ["@phrasing", "hey-child"],
        },
        // 自定义元素 'hey-child' 没有特定配置
        "hey-child": {},
      });
    });
  },
});

使用 custom_elements、padEmpty 和 componentUrl 的示例

tinymce.init({
  selector: "textarea",
  custom_elements: {
    // 空内容时添加填充的自定义元素
    "my-empty-padded": {
      extends: "div",
      padEmpty: true,
    },
    // 带有 Web Component 的块级自定义元素(行为类似于 div)
    "my-custom-block": {
      extends: "div",
      attributes: ["@global", "data-type", "data-id"],
      children: ["@flow"],
      componentUrl: "/path/to/block-component.js"
    },
    // 带有 Web Component 的行内级自定义元素(行为类似于 span)
    "my-custom-inline": {
      extends: "span",
      attributes: ["@global", "data-value"],
      children: ["@phrasing"],
      componentUrl: "/path/to/inline-component.js"
    }
  }
});

convert_unsafe_embeds 选项

此选项控制 <object> 和 <embed> 元素是否将转换为限制性更强的替代方案,即图像 MIME 类型转换为 <img>,视频 MIME 类型转换为 <video>,音频 MIME 类型转换为 <audio>,其他或未指定的 MIME 类型转换为 <iframe>。

当转换为 <img>、<video> 或 <audio> 时,可防止嵌入资源执行潜在恶意操作,包括脚本运行、文件下载、浏览器弹出窗口、绕过同源策略等。此外,启用 sandbox_iframes 选项可确保 <iframe> 转换也被中和。

类型:Boolean

默认值:true

可能值:true、false

示例:使用 convert_unsafe_embeds 选项

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  convert_unsafe_embeds: false
});

doctype

为编辑区域设置 doctype。

更改 doctype 可能会在不同浏览器上产生不同效果,并可能引入怪异模式。仅在明确知道操作后果时使用此功能。有关 doctype 的更多信息,请访问此链接。

element_format

此选项控制元素是以 HTML 还是 XHTML 模式输出。该选项的默认状态为 html。这意味着例如 <br /> 默认情况下将为 <br>。

类型:String

默认值:'html'

可能值:'xhtml'、'html'

示例:使用 element_format

// 以 XHTML 样式输出元素
tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  element_format: 'xhtml'
});

encoding

此选项允许从 TinyMCE 中获取 XML 转义内容。通过将此选项设置为 xml,提交的内容将被转换为 XML 字符串,并转义 <、>、"、' 和 & 等字符,分别转换为 &lt;、&gt;、&quot;、&apos; 和 &amp;。

此选项默认为禁用状态。

类型:String

示例:使用 encoding

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  encoding: 'xml'
});

entities

此选项包含一个以逗号分隔的实体名称列表,这些名称用于代替字符。奇数项为字符代码,偶数项为字符代码的名称。

基础实体 <、>、&、' 和 " 将始终被实体编码为其对应的名称。但是,' 和 " 将仅在属性值内编码,而 < 和 > 将仅在文本节点内编码。这是符合 HTML 和 XML 规范的正确行为。

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

类型:String

默认值:

'160,nbsp,161,iexcl,162,cent,163,pound,164,curren,165,yen,166,brvbar,' +
'167,sect,168,uml,169,copy,170,ordf,171,laquo,172,not,173,shy,174,' +
'reg,175,macr,176,deg,177,plusmn,178,sup2,179,sup3,180,acute,181,' +
'micro,182,para,183,middot,184,cedil,185,sup1,186,ordm,187,raquo,188,' +
'frac14,189,frac12,190,frac34,191,iquest,192,Agrave,193,Aacute,194,' +
'Acirc,195,Atilde,196,Auml,197,Aring,198,AElig,199,Ccedil,200,Egrave,' +
'201,Eacute,202,Ecirc,203,Euml,204,Igrave,205,Iacute,206,Icirc,207,' +
'Iuml,208,ETH,209,Ntilde,210,Ograve,211,Oacute,212,Ocirc,213,Otilde,' +
'214,Ouml,215,times,216,Oslash,217,Ugrave,218,Uacute,219,Ucirc,220,' +
'Uuml,221,Yacute,222,THORN,223,szlig,224,agrave,225,aacute,226,acirc,' +
'227,atilde,228,auml,229,aring,230,aelig,231,ccedil,232,egrave,233,' +
'eacute,234,ecirc,235,euml,236,igrave,237,iacute,238,icirc,239,iuml,' +
'240,eth,241,ntilde,242,ograve,243,oacute,244,ocirc,245,otilde,246,' +
'ouml,247,divide,248,oslash,249,ugrave,250,uacute,251,ucirc,252,uuml,' +
'253,yacute,254,thorn,255,yuml,402,fnof,913,Alpha,914,Beta,915,Gamma,' +
'916,Delta,917,Epsilon,918,Zeta,919,Eta,920,Theta,921,Iota,922,Kappa,' +
'923,Lambda,924,Mu,925,Nu,926,Xi,927,Omicron,928,Pi,929,Rho,931,' +
'Sigma,932,Tau,933,Upsilon,934,Phi,935,Chi,936,Psi,937,Omega,945,' +
'alpha,946,beta,947,gamma,948,delta,949,epsilon,950,zeta,951,eta,952,' +
'theta,953,iota,954,kappa,955,lambda,956,mu,957,nu,958,xi,959,' +
'omicron,960,pi,961,rho,962,sigmaf,963,sigma,964,tau,965,upsilon,966,' +
'phi,967,chi,968,psi,969,omega,977,thetasym,978,upsih,982,piv,8226,' +
'bull,8230,hellip,8242,prime,8243,Prime,8254,oline,8260,frasl,8472,' +
'weierp,8465,image,8476,real,8482,trade,8501,alefsym,8592,larr,8593,' +
'uarr,8594,rarr,8595,darr,8596,harr,8629,crarr,8656,lArr,8657,uArr,' +
'8658,rArr,8659,dArr,8660,hArr,8704,forall,8706,part,8707,exist,8709,' +
'empty,8711,nabla,8712,isin,8713,notin,8715,ni,8719,prod,8721,sum,' +
'8722,minus,8727,lowast,8730,radic,8733,prop,8734,infin,8736,ang,' +
'8743,and,8744,or,8745,cap,8746,cup,8747,int,8756,there4,8764,sim,' +
'8773,cong,8776,asymp,8800,ne,8801,equiv,8804,le,8805,ge,8834,sub,' +
'8835,sup,8836,nsub,8838,sube,8839,supe,8853,oplus,8855,otimes,8869,' +
'perp,8901,sdot,8968,lceil,8969,rceil,8970,lfloor,8971,rfloor,9001,' +
'lang,9002,rang,9674,loz,9824,spades,9827,clubs,9829,hearts,9830,' +
'diams,338,OElig,339,oelig,352,Scaron,353,scaron,376,Yuml,710,circ,' +
'732,tilde,8194,ensp,8195,emsp,8201,thinsp,8204,zwnj,8205,zwj,8206,' +
'lrm,8207,rlm,8211,ndash,8212,mdash,8216,lsquo,8217,rsquo,8218,sbquo,' +
'8220,ldquo,8221,rdquo,8222,bdquo,8224,dagger,8225,Dagger,8240,' +
'permil,8249,lsaquo,8250,rsaquo,8364,euro'

示例:使用实体

tinymce.init({
  selector: 'textarea',  // 根据HTML更改此值
  entities: '160,nbsp,162,cent,8364,euro,163,pound'
});

entity_encoding

此选项控制TinyMCE处理实体/字符的方式。值可在下方的编码类型中设置。还可以通过设置为“named+numeric”来混合使用命名实体和数字实体,这样配置实体中的实体将生成实体名称,其他实体则使用数字实体。

基础实体<、>、&、'和"将始终编码为其命名实体形式。但'和"仅会在属性值中编码,<和>仅会在文本节点中编码。这符合HTML和XML规范。

编码类型

名称摘要

named

字符将根据实体选项转换为命名实体。例如,不间断空格可能编码为&nbsp;。这是默认值。

numeric

字符将转换为数字实体。例如,不间断空格会编码为&#160;。

raw

除XML默认实体&、<、>、'和"外,所有字符将以非实体形式存储。

类型:字符串

示例:使用entity_encoding

tinymce.init({
  selector: 'textarea',  // 根据HTML更改此值
  entity_encoding: 'raw'
});

extended_valid_elements

此选项与valid_elements非常相似。此选项与valid_elements的唯一区别是,此选项会被添加到现有规则集中。如果现有规则集没问题,但想添加一些也应有效的特定元素,这非常有用。默认规则集由schema选项控制。

通过指定现有元素规则(例如img)添加新属性时,该元素的整个规则会被覆盖,因此请务必包含所有有效属性,而不仅仅是要添加的属性。默认规则请参阅valid_elements。

以下示例替换当前的img规则(包括全局元素规则)。

类型:字符串

示例:使用extended_valid_elements

tinymce.init({
  selector: 'textarea',  // 根据HTML更改此值
  extended_valid_elements: 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]'
});

更多配置选项请参阅 valid_elements 和 invalid_elements。

使用 extended_valid_elements 允许 script 元素

在 TinyMCE 中允许 script 元素 (<script>) 会使用户面临 跨站脚本攻击 (XSS) 的风险。

若要在编辑器中允许 script 元素,需在 TinyMCE 配置中添加以下内容:

extended_valid_elements: 'script[src|async|defer|type|charset]'

交互示例

此示例展示了如何使用 extended_valid_elements 选项。该选项用于添加额外的有效元素和属性。

HTML

<textarea id="valid-elements">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">欢迎使用 TinyMCE 编辑器演示!</h2>

  <h2>有问题或需要帮助?</h2>
  <ul>
    <li>我们的 <a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a> 是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题?试试 Stack Overflow 上的 <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> 标签</a>。</li>
    <li>作为 <a href="https://www.tiny.cloud/pricing">TinyMCE 高级套餐</a> 的一部分,我们也提供企业级支持。</li>
  </ul>

  <h2>一个简单的表格用于测试</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>产品</th>
        <th>成本</th>
        <th>真的吗?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">TinyMCE</td>
        <td style="text-align: center;">免费</td>
        <td style="text-align: center;">是的!</td>
      </tr>
    </tbody>
  </table>

  <h2>发现 bug?</h2>
  <p>如果您认为发现了 bug,请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 中创建 issue 向开发者报告。</p>

  <h2>最后……</h2>
  <p>应用需要文件上传功能?考虑将 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 结合使用,以获得快速、现代的上传体验。</p>
  <p>感谢支持 TinyMCE!希望它能帮助您和您的用户创建优质内容。<br>来自 TinyMCE 团队的诚挚问候。</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#valid-elements',
  plugins: 'code',
  height: 500,
  extended_valid_elements: 'img[class=myclass|!src|border~0|alt|title|width|height|style]',
  invalid_elements: 'strong,b,em,i',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

fix_list_elements

此选项允许您指定列表元素 (ul、ol) 应转换为有效的 XHTML。由于会导致某些浏览器出现故障,此选项默认处于禁用状态。

此无效列表:

<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>

类型: Boolean

默认值: false

可能值: true、false

示例:使用 fix_list_elements

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  fix_list_elements: true
});

forced_root_block

此选项允许您调整用于包装非块级元素和文本节点的默认块级元素。例如 <strong>something</strong> 将输出为:<p><strong>something</strong></p>。此选项无法禁用。

若要在内容中避免块级元素,请使用 newline_behavior 设置更改按下 Enter 键时的行为。

不使用 p 元素作为根块级元素会损害编辑器的功能。

类型: String

默认值: 'p'

示例:使用 forced_root_block

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  forced_root_block: 'div'
});

forced_root_block_attrs

此选项允许您为 forced_root_block 指定属性。

类型: Object

示例:使用 forced_root_block_attrs

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  forced_root_block_attrs: {
    'class': 'myclass',
    'data-something': 'my data'
  }
});

indent

此选项默认开启,当使用 getContent() 输出 HTML 以及在 TinyMCE 的 Preview 对话框中渲染 HTML 时,会在闭合块元素和开始块元素之间添加换行符 — U+000A,\n。

将 indent 设置为 false 可以从 TinyMCE 获得不添加任何换行符的 HTML 输出。

类型:Boolean

默认值:false

可能的值:true,false

示例:将 indent 设置为 false

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  indent: false,
});

invalid_elements

此选项指示编辑器在 TinyMCE 执行清理时删除特定元素。此选项应包含要从内容中排除的元素名称的逗号分隔列表。

类型:String

示例:使用 invalid_elements

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_elements: 'strong,em'
});
此选项不接受列表中的属性,只接受元素。
invalid_elements 选项优先于 valid_elements 和 extended_valid_elements 选项中具有精确名称的元素规则。它对匹配通配符规则的元素没有影响,例如在任一选项中的 *[*]、*[class] 或 h?。

有关更多配置选项,请参阅 valid_elements 和 extended_valid_elements。

invalid_styles

此选项允许您限制特定元素的有效样式。它接受两种输入格式:

  • 字符串格式 - 这是不允许的全局样式列表。

  • 对象格式 - 这是一种更复杂的格式,您可以在其中指定单个元素的无效样式。

简单的全局类

类型:String,Object

示例:使用 invalid_styles 字符串

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_styles: 'color font-size'
});

元素特定类

类型:String,Object

示例:使用 invalid_styles 对象

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  invalid_styles: {
    '*': 'color font-size', // Global invalid styles
    'a': 'background' // Link specific invalid styles
  }
});

pad_empty_with_br

默认情况下,TinyMCE 将不间断空格实体 — &nbsp; — 作为占位符放置在空块元素内。

例如,空段落 <p></p> 默认情况下将序列化为 <p>&nbsp;</p>。

pad_empty_with_br 选项允许 TinyMCE 将此默认占位符更改为换行标签:<br>。

例如,当此选项设置为 true 时,空段落 <p></p> 将序列化为 <p><br></p>。

类型:Boolean

默认值:false

可能的值:true,false

示例:使用 pad_empty_with_br

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  pad_empty_with_br: true,
});

protect

此配置选项允许您控制在将内容传递到编辑器时哪些内容应受到保护,防止编辑。例如,这可能是 HTML 中的控制代码。建议不要使用内联控制内容,因为这会破坏所见即所得的编辑概念,但有时无法避免。

该选项接受一个正则表达式数组,它将根据这些正则表达式匹配内容,并且在编辑时这些内容将不可见。

类型:Array

示例:使用 protect

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  protect: [
    /\<\/?(if|endif)\>/g,  // Protect <if> & </endif>
    /\<xsl\:[^>]+\>/g,  // Protect <xsl:...>
    /<\?php.*?\?>/g  // Protect php code
  ]
});

remove_trailing_brs

此选项允许您禁用 TinyMCE 的默认行为,即删除块元素末尾的 <br> 标签。

Gecko 和 WebKit 浏览器会注入这些元素,以便可以将插入符放在空块中。此逻辑尝试删除这些元素,同时保留用户有意放置的标签。

类型:Boolean

默认值:true

可能的值:true,false

示例:使用 remove_trailing_brs

tinymce.init({
  selector: 'textarea',  // 根据 HTML 修改此值
  remove_trailing_brs: false
});

sandbox_iframes

此选项允许控制 <iframe> 元素在插入编辑器时是否被沙盒化。启用后,所有 <iframe> 元素都将被赋予 sandbox="" 属性,应用所有限制。

类型: Boolean

默认值: true

可能的值: true,false

示例:使用 sandbox_iframes 选项

tinymce.init({
  selector: 'textarea',  // 根据 html 修改此值
  sandbox_iframes: false
});

sandbox_iframes_exclusions

当 sandbox_iframes 选项启用时,此选项允许指定一个应被排除应用 sandbox="" 属性的域名列表。此选项接受一个字符串数组,每个字符串表示至少要排除的域名的顶级和二级域名。默认情况下,此选项设置为热门网站嵌入代码中提供的域名数组。要对所有 iframe 启用沙盒化,请将此选项设置为空数组 []。

当 sandbox_iframes 选项设置为 false 时,所有域名都将被排除在沙盒化之外。

类型: Array

默认值:

[
  'youtube.com',
  'youtu.be',
  'vimeo.com',
  'player.vimeo.com',
  'dailymotion.com',
  'embed.music.apple.com',
  'open.spotify.com',
  'giphy.com',
  'dai.ly',
  'codepen.io'
]

示例:使用 sandbox_iframes_exclusions 选项

tinymce.init({
  selector: "textarea",
  sandbox_iframes: true,
  sandbox_iframes_exclusions: [
    'youtube.com',
    'youtu.be',
    'vimeo.com',
    'player.vimeo.com',
    'dailymotion.com',
    'embed.music.apple.com',
    'open.spotify.com',
    'giphy.com',
    'dai.ly',
    'codepen.io'
  ],
});

schema

此选项允许在 HTML4 和 HTML5 schema 之间切换。这控制了可以放置在 HTML 中的有效元素和属性。此值可以是默认的 html5,html4 或 html5-strict。

html5 schema 是完整的 HTML5 规范,包括旧的 HTML4 元素以保证兼容性。html5-strict 将只允许当前 HTML5 规范中的元素,不包括已移除的内容。html4 schema 包括完整的 html4 过渡规范。

还请注意,所有事件属性默认都被排除,因为使用像 “onclick” 这样的内联脚本句柄是不好的做法。您可以使用 extended_valid_elements 选项手动添加额外的元素和属性。

类型: String

默认值: 'html5'

可能的值: 'html5','html4','html5-strict'

示例:使用 schema

tinymce.init({
  selector: 'textarea',  // 根据 HTML 修改此值
  schema: 'html5'
});

valid_children

此选项允许控制指定父元素内可以存在的子元素。

TinyMCE 默认将移除/拆分任何非 HTML5 或 HTML 过渡内容。例如,p 不能是另一个 p 元素的子元素。此选项的默认值由当前 schema 控制。

此选项的语法是一个逗号分隔的父元素列表,其中包含应添加/删除的作为该元素有效子元素的元素。例如,'+body[style]' 会将 style 添加为 body 的有效子元素。

控制字符

名称摘要

+

将子元素添加到指定父元素的有效元素列表中。

-

将子元素从指定父元素的有效子元素列表中移除。

此示例展示了如何将 style 添加为 body 的有效子元素,并将 div 移除为有效子元素。它还强制只有 strong,a 和 text 内容可以作为 p 的有效子元素。

类型: String

示例:使用 valid_children

tinymce.init({
  selector: 'textarea',  // 根据 HTML 修改此值
  valid_children: '+body[style],-body[div],p[strong|a|#text]'
});

这是一个您不应该随意修改的选项。此选项的默认规则集遵循 HTML5 规范和一些来自 HTML4 的旧元素。您可以通过配置 schema 选项在这些默认值之间切换。

valid_classes

此选项允许您限制特定元素的有效类。此选项有两种格式:一种是简单的允许的全局类列表的字符串格式,另一种是更复杂的对象格式,您可以在其中为各个元素指定类。

类型: String,Object

示例:简单的全局类

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  valid_classes: 'class1 class2 class3'
});

元素特定类的示例

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  valid_classes: {
    '*': 'class1 class2 class3', // 全局类
    'a': 'class4 class5' // 链接特定的类
  }
});

valid_elements

此选项定义当编辑器保存时,编辑文本中哪些元素将被保留。您可以使用此选项将返回的 HTML 限制为一个子集。

此选项包含一个由逗号分隔的元素转换块列表。每个块包含有关如何处理一个元素及其属性的信息。此选项的默认规则集是完整的 HTML5 和 HTML4 规范的混合,或者根据配置的模式使用 HTML5 或 HTML4 规范。

如果您只想为少数项目添加或更改某些行为,请使用 extended_valid_elements 选项

控制字符

每个元素规则使用以下结构。方括号内的部分是可选的,双引号内的字符是字面量。

元素规则:    [- 或 #]名称[/别名][属性列表]
属性列表:  [!]"[" 属性规则 "|" 属性规则 "|" ... "]"
属性规则:  [! 或 -]名称[=值, ~值, 或 <值?值]

下表列出了每个控制字符及其在规则中使用的部分。

字符使用位置摘要

@

元素规则

具有此名称的规则将应用于在此规则之后定义的所有元素。因此 @[attr1|attr2] 将为所有元素启用 attr1 和 attr2,但 element1,@[attr1|attr2],element2,element3 将仅为 element2 和 element3 启用 attr1 和 attr2。只使用第一个 @ 规则。valid_elements 中的 @ 规则也适用于 extended_valid_elements 中的元素,如果 valid_elements 已经有一个 @ 规则,则 extended_valid_elements 中的 @ 规则将被忽略。如果只有 extended_valid_elements 有一个 @ 规则,则它仅适用于该选项中在其之后定义的元素。

,

规则列表

分隔元素规则。不要在逗号后添加空格。例如,'p, strong' 不允许 <strong> 元素。

/

元素规则

分隔元素同义词。第一个元素是输出的元素。例如,strong/b 将 <b> 元素转换为 <strong> 元素。

[

元素规则

开始元素规则的属性列表。

]

元素规则

结束元素规则的属性列表。

|

属性列表

分隔属性规则。

-

元素规则(前缀)

如果元素为空,则移除该元素。例如,-strong 移除 <strong></strong>。

#

元素规则(前缀)

如果元素为空,则用 &nbsp; 填充该元素。例如,#p 将 <p></p> 转换为 <p>&nbsp;</p>。

!

元素规则(在 [ 之前)

如果元素没有属性,则移除元素标签并保留其内容。! 必须直接放在元素名称之后,或别名之后,并且在属性列表之前。例如,span![class|style] 将 <span>text</span> 转换为 text 并保留 <span class="note">text</span>。

!

属性规则(前缀)

使属性成为必需的。如果元素没有所需的属性,则移除元素标签并保留其内容。例如,a[!href] 将 <a title="note">text</a> 转换为 text。

-

属性规则(前缀)

移除元素从 @ 规则继承的属性。例如,@[id|title],p,a[-title|href] 允许 p 元素具有 id 和 title,a 元素具有 id 和 href。

=

属性规则

使属性默认为指定的值。例如,a[href|target=_blank] 为没有 target 属性的链接添加 target="_blank"。

~

属性规则

强制属性为指定的值。例如,a[href|target~_blank] 将所有链接的 target 设置为 _blank。

<

属性规则

列出属性允许的值。TinyMCE 当前解析此规则但不强制执行。例如,a[href|target<_blank?_self]。

?

属性规则

分隔属性验证值。参见上文。

可以在元素和属性名称中使用通配符:* 匹配零个或多个字符,+ 匹配一个或多个字符,? 匹配零个或一个字符。例如,td[col*|row*] 允许 td 元素具有 colspan 和 rowspan 属性。通配符匹配任意字符,因此 h? 匹配 h1 到 h6,也匹配 hr。

当内容保存时,会再次检查两种形式的 !,之后会移除规则不允许的或不安全的属性。例如,对于 span![class],<span title="note">text</span> 会保存为 text。对于 a[!href],<a href="javascript:alert(1)">text</a> 会保存为 text。

当启用验证时,即使属性规则未列出,以 data- 或 aria- 开头的属性也会被保留。

默认规则集移除没有属性的 <span> 元素的标签,填充空块级元素,移除空行内元素,并将 <b> 和 <i> 转换为 <strong> 和 <em>。当设置了 valid_elements 时,这些默认值不适用。要保留它们,请使用 !、#、- 和 / 控制符,例如 span![class|style]、#p 和 -strong/b。如果没有任何规则允许 span,则每个 <span> 元素的标签都会被移除,包括有属性的元素。

变量

名称摘要

{$uid}

生成唯一 ID。例如,'p[id~{$uid}]'。

将 valid_elements 设置为 *[*] 将允许所有元素和所有属性。这等同于禁用验证:像 onclick 这样的事件处理属性和 <script> 元素会被保留,并且 invalid_elements 选项没有效果。由于安全风险,不建议使用 *[*]。

类型:String

示例:使用 valid_elements

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  valid_elements: 'a[href|target=_blank],strong/b,div[align],br'
});

此示例字符串告诉 TinyMCE:

  • 移除不是 a、strong、div 或 br 元素的所有元素。

  • 将 b 元素转换为 strong 元素。

  • 默认 target 为 _blank,并保留相关元素的 href、target 和 align 属性。

重复属性警告

注意不要在定义中重复属性,因为这可能会导致 TinyMCE 在输出中渲染重复的属性。例如,如果你有:

// 错误代码:dir 和 style 列出两次
'blockquote[dir|style|cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick'
 +'|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout'
 +'|onmouseover|onmouseup|style|title]'

那么如果你的代码中碰巧有一个 <blockquote> 元素,且带有 style= 或 dir= 属性,编辑器将导致这些属性在输出中重复,从而产生无效的 XHTML。

valid_styles

要使用此选项,指定一个包含元素名称到允许样式映射的对象。要指定所有元素的允许样式,使用 * 作为元素名称。

默认情况下,除非配置了 valid_styles 或 invalid_styles,否则允许所有样式。

类型:Object

示例:使用 valid_styles

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  valid_styles: {
    '*': 'border,font-size',
    'div': 'width,height'
  }
});