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

此页更新时间:2019-02-28 19:44

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

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

block_formats(区块列表)

用于配置“菜单:格式→区块”中的选项(非菜单:格式→格式→区块)。它的值形如:title=block,多个用分号分隔。

取值:String

默认:'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre'

tinymce.init({
    selector: '#textarea1',
    block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
});

font_formats(字体列表)

配置编辑器可选则的字体列表。格式为:标题1=字体名1,字体名2可多个;标题2=字体名3

每一项用分号分隔,字体名之间用逗号分隔。字体名写法可参考CSS的font-family。

取值:String

默认:'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'

tinymce.init({
    selector: '#textarea1',//这是中文字体的一个例子
    font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
});

fontsize_formats(文字大小列表)

定义字体大小列表的项目,每一项用空格分隔。数值单位与CSS写法相同。

取值:String

默认: '11px 12px 14px 16px 18px 24px 36px 48px'

tinymce.init({
    selector: '#textarea1',
    toolbar: 'fontsizeselect',
    fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
});

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的例子)

indentation(缩进)

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

取值:String

默认:'30px'

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

indentation : '10px'

indent_use_margin(使用margin缩进)

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

取值:true/false

默认:false

indent_use_margin : true

style_formats(自定义段落样式格式)

注意,这货与formats的写法规则差不多,但定义的东西不一样。这货定义后出现在段落选项里。formats则是改写默认格式。

光说是难理解的,上个DEMO:

tinymce.init({
    selector: '#textarea1',
    plugins:'code',
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
    style_formats_merge: true,
    style_formats_autohide: true,
});

style_formats_merge(替换还是附加到自定义段落样式列表)

翻译成这么长一串,意思表达清楚就好。该选项的作用就是上面定义的style_formats是覆盖掉默认的列表,还是在默认列表后面附加自定义的配置。

取值:true/false

默认:false

例子见上面style_formats例子那段代码。

style_formats_autohide(隐藏当前不可用的样式列表)

该选项设为true时自动隐藏与当前选择内容不匹配的样式。

取值:true/false

默认:false

例子见上面style_formats例子那段代码。在style_formats定义了一个仅作用于tr的样式"Table row 1",但当前选择块的内容不包含tr,所以列表中隐藏了"Table row 1"。

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