格式化配置 | TinyMCE中文文档中文手册

配置参考 \ 格式化配置有关格式工具的相关配置。

此页更新时间：2020-12-25 16:34

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

有关格式工具的相关配置：

formats（格式自定义*）
formats_empty_lines
indentation（缩进）
indent_use_margin（使用margin缩进）

formats（格式自定义）

该选项可用于覆盖编辑器默认格式，添加自定义格式。

例如，当用户点击编辑器工具栏的“加粗”工具时，如果使用该选项定义了该行为，则TinyMCE会按照定义的行为去执行操作。

例子可参考前面的章节：简介与入门 \ 内容过滤，这里将更加详细的介绍formats的各种参数及其用法。

内置格式

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代替。此变量将替换为用户选择的值。

格式类型

block 块操作
inline 内联操作
selector 选择器操作

block 块操作

更改块元素的默认行为，也就是当前焦点外围标签整体变化的行为。

以下示例改写了默认格式h1，也就是当你使用工具栏指定当前段落为：“标题1”时，原本的默认行为是将当前焦点外围标签变为h1，但现在是将外围标签变为p，并追加一个class值"class1"。

tinymce.init({
    selector: '#textarea1',
    formats:{
        h1:{block:'p',classes:'class1'},
    }
});

inline 内联操作

以下示例改写了加粗的默认行为，默认行为是用strong包裹当前选中的文本，现在则是用span包裹，并追加一个class值"class1"。

tinymce.init({
    selector: '#textarea1',
    formats:{
        bold: { inline: 'span', classes: 'class1' }
    }
});

selector 选择器操作

可使用css3选择器查找选中内容内的元素。它仅将当前格式应用于特定的元素，例如表的奇数行。

tinymce.init({
    selector: '#textarea1',
    formats:{
        bold: { selector: 'strong', styles: {'color':'red'} }
    }
});

格式参数

classes

用空格分隔的类列表，追加到选中或新创建的内联或块元素。

类型：String

例：bold: { inline: 'span', classes: 'class1' }

styles

包含名称/值的一个对象。将自定义css样式置入到选中内容中，如上例的加粗变红。

类型：Object

例：bold: { inline: 'strong', styles: {'color':'red'} }

attributes

包含名称/值的一个对象。给html标签添加自定义属性。

类型：Object

例：bold: { inline: 'strong', attributes: { 'data-style': 'bold' } }

exact

可设值为：true，此选项将禁用样式合并功能，用于解决一些css继承问题，例如下划线、删除线。默认为false。

类型：boolean

例：underline: { inline: 'span', styles: { 'text-decoration': 'underline' }, exact: true } }

wrapper

指定当前格式是块元素，例如div或blockquote。

类型：boolean

默认：false

remove

当执行格式操作时，对该元素进行的清理行为。其值可以是：

none：仅从元素中删除样式、类或属性，不会删除该元素。
empty：如果元素没有样式、类或属性，则删除该元素。
all：删除该元素。

虽然remove多用在removeformat工具上，但TinyMCE并不限制你将其用在其它地方。

tinymce.init({
    selector: '#textarea1',
    extended_valid_elements: 'span[*]', // Needed to retain spans without attributes these are removed by default
    formats: {
        removeformat: [
            // Configures `clear formatting` to remove specified elements regardless of it's attributes
            { selector: 'b,strong,em,i,font,u,strike', remove: 'all' },
            // Configures `clear formatting` to remove the class red from spans and if the element then becomes empty i.e has no attributes it gets removed
            { selector: 'span', classes: 'red', remove: 'empty' },
            // Configures `clear formatting` to remove the class green from spans and if the element then becomes empty it's left intact
            { selector: 'span', classes: 'green', remove: 'none' }
        ],
    }
});

block_expand

此选项控制操作选择是否应向上扩展到最接近的匹配块元素。在配置removeformat删除块元素时，这可能很有用。如果选择开始位于匹配块元素的开头部分，那么也将包含该块元素。如果选择的结尾位于匹配块元素的末尾部分，那么也将包含该父元素。

因此，如果在此html内容中选择是从a到b，<h1><b>[a</b></h1><p>b]</p>则即使h1不是实际选择的一部分，也将删除h1。

取值：true/false

默认：false

deep

当设为true时，尝试在选择范围内深度清除当前样式。默认为false，当尝试从类中除去某个类时，可能会存在无法删除的情况。

取值：true/false

默认：false

比较难理解，上个DEMO试一下：

tinymce.init({
    selector: '#textarea1',
    plugins:'code',
    style_formats: [
        { title: 'deep false', inline: 'span', classes: 'myclass1', deep: false },
        { title: 'deep true', inline: 'span', classes: 'myclass2', deep: true }
    ],
    content_style: '.myclass1{color:red;} .myclass2{font-weight:700;}',
});

格式选项的部分示例：

这个例子覆盖了一些内置格式，告诉TinyMCE使用指定的class而不是创建内联样式。最后还创建了一个自定义格式，它生成一个带title属性且为红色的h1。

tinymce.init({
    selector: '#textarea1',
    formats: {
        alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left' },
        aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center' },
        alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right' },
        alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full' },
        bold: { inline: 'span', classes: 'bold' },
        italic: { inline: 'span', classes: 'italic' },
        underline: { inline: 'span', classes: 'underline', exact: true },
        strikethrough: { inline: 'del' },
        forecolor: { inline: 'span', classes: 'forecolor', styles: { color: '%value' } },
        hilitecolor: { inline: 'span', classes: 'hilitecolor', styles: { backgroundColor: '%value' } },
        custom_format: { block: 'h1', attributes: { title: 'Header' }, styles: { color: 'red' } }
    },
});

自定义格式API


//应用一个自定义格式
tinymce.activeEditor.formatter.apply('custom_format');
//移除一个自定义格式
tinymce.activeEditor.formatter.remove('custom_format');

//注册格式时可以包含变量，在应用时给该变量赋值
//注册一个自定义格式，其中包含变量
tinymce.activeEditor.formatter.register('custom_format', { inline: 'span', styles: { color: '%value' } });
//应用自定义格式，给变量赋值
tinymce.activeEditor.formatter.apply('custom_format', { value: 'red' });

removeformat（参考上面remove的例子）

format_empty_lines

5.6新增

此选项允许将内联格式应用与多行选择的空行，例如strong 、span。

暂翻待具体验证。

取值：ture / false

默认：false

indentation（缩进）

设置缩进工具的缩进大小。

取值：String

默认：'30px'

注意：此缩进并不是首行缩进text-indent，而是padding-left

indentation : '10px'

indent_use_margin（使用margin缩进）

默认缩进使用padding，该选项为true时会使用margin代替padding。

取值：true/false

默认：false

indent_use_margin : true

下一节：图片&文件上传配置