返回介绍

Text Pattern plugin

发布于 2019-05-06 06:50:36 字数 7646 浏览 1108 评论 0 收藏 0

The Text Pattern plugin matches special patterns in the text and applies formats, replaces text, or executes commands on these patterns.

The default pattern is similar to markdown syntax, so the user can type # text to produce a header or **text** to make text bold.

Type: String

Example
tinymce.init({
  selector: "textarea",
  plugins: "textpattern"
});

Options

This setting affects the execution of the textpattern plugin. Text patterns that are matched by the editor can be changed here.

textpattern_patterns

This option allows configuring the text patterns that get matched by the textpattern plugin. By default, it has basic markdown patterns.

There are three types of patterns: inline, block, and replacement patterns. Inline patterns have a start and an end text pattern whereas the block and replacement patterns only have a start. A user can specify the formats to be applied to the selection, commands to be executed, or text to be replaced.

When using list commands make sure that the lists plugin is registered for normalized behavior across browsers.

Note: Formats and commands must be already registered with the editor. See the formats and commands documentation for more information.

Default Value:

[
  {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' }
]

Inline patterns

Inline patterns must have the following:

  • A start and an end.
  • A format or a cmd.
    • If cmd is specified, an optional value property is allowed.

This allows for patterns to be used to either apply a format or execute a command, optionally with the given value.

Note: Inline patterns are executed on either pressing the spacebar or the Enter key.

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugin: 'textpattern',
  textpattern_patterns: [
    {start: '*', end: '*', format: 'italic'},
    {start: '**', end: '**', format: 'bold'},
    {start: '~', end: '~', cmd: 'createLink', value: 'https://tiny.cloud'}
  ]
});

Using the configuration in this example:

  • {start: '*', end: '*', format: 'italic'} - Entering text between* and then pressing the spacebar will result in the italic format being applied to the text between the * symbols.
  • {start: '**', end: '**', format: 'bold'} - Entering text between** and then pressing the spacebar will result in the bold format being applied.
  • {start: '~', end: '~', cmd: 'createLink', value: 'https://tiny.cloud'} - This executes editor.execCommand('createLink', false, 'https://tiny.cloud'), which will wrap the text between the ~ symbols in a link that points to https://tiny.cloud.

Block patterns

Block patterns must have the following:

  • A start
  • A format or a cmd
    • If cmd is specified, an optional value property is allowed.

The block patterns do not have an end property. This allows for patterns to be used to either apply a block format or execute a command, optionally, with the given value.

Note: Block patterns are only executed on Enter, not on pressing the spacebar.

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugin: 'textpattern lists',
  textpattern_patterns: [
    {start: '#', format: 'h1'},
    {start: '##', format: 'h2'},
    {start: '###', format: 'h3'},
    {start: '####', format: 'h4'},
    {start: '#####', format: 'h5'},
    {start: '######', format: 'h6'},
    {start: '* ', cmd: 'InsertUnorderedList'},
    {start: '- ', cmd: 'InsertUnorderedList'},
    {start: '1. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' }},
    {start: '1) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'decimal' }},
    {start: 'a. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-alpha' }},
    {start: 'a) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-alpha' }},
    {start: 'i. ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-roman' }},
    {start: 'i) ', cmd: 'InsertOrderedList', value: { 'list-style-type': 'lower-roman' }}
  ]
});

Using the configuration in this example:

  • {start: '#', format: 'h1'} - Typing #, some text, and then pressing Enter will convert the text to a h1 heading.
  • Typing 1., some text, and then pressing Enter will convert the text into an ordered list, with the original text as the first list item, and the new line as the second list item. Since we have specified value, this pattern will execute editor.execCommand('InsertOrderedList', false, { 'list-style-type': 'decimal'}).

Replacements patterns

Replacement patterns must have the following:

  • A start.
  • A replacement, which takes a string that can be text or HTML.

Whether a replacement pattern inserts a block or inline element depends on what the replacement string is.

Note: Replacement patterns are executed on either pressing the spacebar or the Enter key.

Example
tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugin: '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> <h2>Author: Name here</h2> <p><em>Date: 01/01/2000</em></p> <hr />'},
  ]
});

Using the configuration in this example:

  • Typing --- and then either pressing the spacebar or the Enter key will insert a horizontal rule block.
  • Typing (c) and then either pressing the spacebar or the Enter key will insert an inline copyright symbol.

This is useful for commonly used phrases or symbols and can be leveraged to create content templates. The last pattern is an example of this.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文