tinymce 字体样式_格式化配置

此页更新时间：2020-01-29 19:27

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

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'

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'

fontsize_formats(文字大小列表)

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

取值：String

默认： '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"。

工具栏→段落→标题1，查看源码。

inline 内联操作

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

选中一段文字，工具栏→加粗，然后查看源码。

selector 选择器操作

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

这是一段文字，其中有一部分文字被strong加粗显示了。你可以选中包含加粗部分的任意一段文本，当执行工具栏的加粗按钮时，选中范围内的加粗部分都变红了。

格式参数

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并不限制你将其用在其它地方。

block_expand

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

因此，如果在此html内容中选择是从a到b，

[a

b]

则即使h1不是实际选择的一部分，也将删除h1。

取值：true/false

默认：false

deep

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

取值：true/false

默认：false

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

全选整段文字，然后选择段落↑，尝试切换deep false和deep true

格式选项的部分示例：

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

自定义格式API

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示例文本。

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