textpattern 快速排版（类似markdown） | TinyMCE中文文档中文手册

插件 \ textpattern 快速排版（类似markdown）匹配文本中的特殊文本标记，并对其执行格式化或执行编辑器命令

此页更新时间：2019-05-02 22:15

此页英文文档：https://www.tiny.cloud/docs/plugins/textpattern/

简单说就是可以自己实现类似markdown类的文本语法结构。灵活运用感觉会很强大啊！

textpattern_patterns

该插件提供一个配置选项 textpattern_patterns，其默认值如下：

tinymce.init({
    selector: '#tinydemo',
    plugins: "textpattern",
    textpattern_patterns:[
      {start: '*', end: '*', format: 'italic'},
      {start: '**', end: '**', format: 'bold'},
      {start: '#', format: 'h1'},
      {start: '##', format: 'h2'},
      {start: '###', format: 'h3'},
      {start: '####', format: 'h4'},
      {start: '#####', format: 'h5'},
      {start: '######', format: 'h6'},
      {start: '1. ', cmd: 'InsertOrderedList'},
      {start: '* ', cmd: 'InsertUnorderedList'},
      {start: '- ', cmd: 'InsertUnorderedList' }
    ],
});

TinyMCE将该配置的参数总结为三种匹配模式：包围、块、替换。内联匹配：有一个开始start和一个结束end。块匹配：仅有一个开始start。替换匹配：完全替换start中定义的标记。

注意：使用的格式或命令必须在当前编辑器中被支持。例如要使用list命令时，需要确保插件中启用了lists插件。

包围匹配

上例默认参数中，形如：{start: '**', end: '**', format: 'bold'} 即为包围匹配。

该模式前两个参数由start和end组成，被start定义的文本和end包围的内容，即为后面为要执行动作的目标。

这里顺便将该参数提供的三种动作一并介绍：

转变格式：{start: '*', end: '*', format: 'italic'} - 由*包围的内容将会变成斜体。
执行命令：{start: '~', end: '~', cmd: 'createLink', value: 'http://tinymce.ax-z.cn'} - 由~包围的内容将加上链接，其href值为value中的内容，该命令等同于执行了：editor.execCommand('createLink', false, 'http://tinymce.ax-z.cn');
完全替换：{start: '(c)', replacement: '©'} - (c)将会被替换成copyright符号。

块匹配

上例默认参数中，形如：{start: '1. ', cmd: 'InsertOrderedList'}, 即为块匹配。

该模式第一个参数由start，不提供end参数，由start开头的当前段落内容，即为后面为要执行动作的目标。

替换匹配

start定义要被替换的目标文本，replacement定义要替换成为的内容。

这里的替换为完全替换，也就是当前行仅包含start中定义的文本，后面没有其它文本，如后面还有文本，则回车时不会执行替换匹配，而是会执行块匹配。

tinymce.init({
    selector: '#tinydemo',
    plugins: "textpattern",
    textpattern_patterns: [
        {start: '---', replacement: '<hr/>'},
        {start: '--', replacement: '—'},
        {start: '-', replacement: '—'},
        {start: '(c)', replacement: '©'},
        {start: '//brb', replacement: 'Be Right Back'},
        {start: '//heading', replacement: '<h1 style="color:blue">Heading here</h1><p><em>Date: 01/01/2000</em></p> '},
    ],
});