@farris/ui-editor v0.2.2

Editor

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project editor to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project editor.

Note: Don't forget to add --project editor or else it will be added to the default project in your angular.json file.

Build

Run ng build editor to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build editor, go to the dist folder cd dist/editor and run npm publish.

Running unit tests

Run ng test editor to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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

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