简介与入门 \ 内容过滤

此页更新时间：2019-02-20 23:04

此页英文文档：https://www.tiny.cloud/docs/general-configuration-guide/filter-content/

此处的内容指的是TinyMCE所处理的源代码。TinyMCE内建全面且强大的过滤功能，可以操纵编辑器对源码的输出结果。

改变格式工具的默认行为

TinyMCE提供给开发人员接口，能够覆盖格式工具的默认行为，将自定义行为添加到源码中输出。

当用户单击编辑器中粗体按钮时，编辑器会按默认操作应用文本样式——也就是加粗，TinyMCE内建一个文本格式化引擎，它允许你去指定该触发行为进行什么操作。例如，你可以定义粗体按钮被单击的行为是文字变红而不是加粗。

内置格式

TinyMCE允许重写的内置格式，如下表所示：

  • alignleft
  • aligncenter
  • alignright
  • alignjustify
  • bold
  • italic
  • underline
  • strikethrough
  • forecolor
  • hilitecolor
  • fontname
  • fontsize
  • blockquote
  • removeformat
  • p
  • h1, h2, h3, h4, h5, h6
  • div
  • address
  • pre
  • div
  • code
  • dt, dd
  • samp

一些内置格式fontsize、fontname、forecolor、hilitecolor，它们的值使用变量%value代替。此变量将替换为用户选择的值。

你一定会觉得这是在说神马，我怎么完全看不懂！我刚读这部分文档的时候也是云里雾里，直到看完才明白官方要表达神马，所以，我在这里插入个例子，亲自试一下就明白了。
tinymce.init({
    selector: '#tinydemo',
    plugins:'code',
    toolbar:'undo redo forecolor bold italic | alignleft aligncenter alignright | code',
    formats: {
        alignright: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'},
        bold: {inline:'span', styles:{color:'#f00'} },
        forecolor: {inline : 'span', styles : {color:'%value',fontWeight:'700'} },
        custom_format: {block : 'h1', attributes : {title:'Header'}, styles : {color:'red'} }
    }
});

内置格式的参数

看完例子，再理解下面这些参数就容易很多了。

名称 说明
inline 包裹选中文本的内联元素名称，比如span，加粗改变颜色默认都在外围插个span，然后再加个style=""
block 指定一个块元素，如h1，当前焦点外围的块元素将被其替换。比如焦点在p标签内，当你使用格式工具指定为“标题1”时，p将会替换成h1。
selector 利用CSS3选择器中所选则内容的查找匹配的内容（如表中的奇数行）。
classes 值为以空格分隔的class列表，如：class1 class2。简单说就是给选中的块加自定义class，如上例的右对齐。
styles 值为包含名称/值的一个对象。将自定义css样式置入到选中内容中，如上例的加粗和颜色。
attributes 值为包含名称/值的一个对象。给html标签添加自定义属性。
exact 可设值为：true，此选项将禁用样式合并功能，用于解决一些css继承问题，例如下划线、删除线。默认为false。
wrapper 指定当前格式是块元素，例如div或blockquote。

schema：照顾老旧浏览器

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

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

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

更多强大的过滤方式，可参考：生成代码配置

下一节是本地化（汉化）

▲