此插件仅适用于 付费 TinyMCE 订阅。

拼写检查器 为 TinyMCE 添加了实时拼写检查功能。有关支持的语言信息,请参阅此部分。

交互式示例

HTML

<textarea id="spellchecker">
  <h1><span lang="en">The Hare and the Tortoise</span></h1>
  <p><span lang="en">A HARE one day riddiculed the short feet and slow pace of the Tortoise, who replied, laughing: &ldquo;Though you be swift as the wind, I will beeat you in a race.&rdquo; The Hare, beleiving her assertion to be simply impossable, assented to the proposal; and they agreed that the Fox should choose the course and fix the gaol. On the day appointed for the race the two started together. The Tortoise never for a momment stopped, but went on with a slow but steady pace straight to the end of the corse. The Hare, lying down by the wayside, fell fast asleep. At last waking up, and moving as fast as he could, he saw the Tortoise had reached the goal, and was comfortably dozzing after her fatigue.</span></p>
  <p><span lang="en">Slow but steady wins the race.</span></p>
  <h1><span lang="es">La liebre y la tortuga</span></h1>
  <p><span lang="es">Un d&iacute;a, una liebre ridiculiz&oacute; los pies cortos y el ritmo lento de la tortuga, quien respondi&oacute; riendo: "Aunque seas veloz como el viento, te vencer&eacute; en una carrera". La Liebre, creyendo que su afirmaci&oacute;n era simplemente imposible, asinti&oacute; a la propuesta; y acordaron que Fox deber&iacute;a elegir el curso y fijar el objetivo. El d&iacute;a designado para la carrera, los dos comenzaron juntos. La Tortuga nunca se detuvo por un momento, sino que continu&oacute; con un ritmo lento pero constante hasta el final del curso. La Liebre, acostada en el camino, se qued&oacute; profundamente dormida. Al despertarse y moverse lo m&aacute;s r&aacute;pido que pudo, vio que la Tortuga hab&iacute;a alcanzado la meta y dormitaba c&oacute;modamente despu&eacute;s de su fatiga.</span></p>
  <p><span lang="es">Lento pero constante gana la carrera.</span></p>
  <h1><span lang="de">Der Hase und die Schildkr&ouml;te</span></h1>
  <p><span lang="de">Eines Tages hat ein Hase die kurzen F&uuml;&szlig;e und das langsame Tempo der Schildkr&ouml;te beseitigt, die lachend antwortete: "Obwohl du so schnell wie der Wind bist, werde ich dich in einem Rennen schlagen." Der Hase, der glaubte, ihre Behauptung sei einfach unm&ouml;glich, stimmte dem Vorschlag zu; und sie waren sich einig, dass der Fuchs den Kurs w&auml;hlen und das Gef&auml;ngnis reparieren sollte. An dem f&uuml;r das Rennen festgelegten Tag starteten die beiden zusammen. Die Schildkr&ouml;te h&ouml;rte nie f&uuml;r einen Moment auf, sondern ging mit einem langsamen, aber stetigen Tempo direkt bis zum Ende der Leiche weiter. Der Hase, der auf der Strecke lag, schlief fest ein. Als er endlich aufwachte und sich so schnell er konnte bewegte, sah er, dass die Schildkr&ouml;te das Ziel erreicht hatte und nach ihrer M&uuml;digkeit bequem d&ouml;ste.</span></p>
  <p><span lang="de">Langsam aber stetig gewinnt das Rennen.</span></p>
  <p>&nbsp;</p>
  <p><strong>Based on:</strong> Aesop, 'Aesop&rsquo;s Fables: The Hare and the Tortoise', <a href="https://www.gutenberg.org/files/21/21-h/21-h.htm#link2H_4_0018" target="_blank" rel="noopener">https://www.gutenberg.org/files/21/21-h/21-h.htm#link2H_4_0018</a></p>
  <p><em>Translations provided by <a href="https://translate.google.com/">Google Translate</a>.</em></p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#spellchecker',
  plugins: 'code tinymcespellchecker link',
  toolbar: 'spellchecker language spellcheckdialog',
  height: 500,
  spellchecker_language: 'en-US',
  content_langs: [
    { title: 'Afrikaans (South Africa)', code: 'af-ZA', customCode: 'af-ZA' },
    { title: 'English (Australia)', code: 'en-AU' },
    { title: 'English (Canada)', code: 'en-CA' },
    { title: 'English (United Kingdom)', code: 'en-GB' },
    { title: 'English (United States)', code: 'en-US' },
    { title: 'Medical English (US)', code: 'en-US', customCode: 'en-US-medical' },
    { title: 'Danish', code: 'da' },
    { title: 'Dutch', code: 'nl-NL' },
    { title: 'Finnish', code: 'fi' },
    { title: 'French', code: 'fr' },
    { title: 'German', code: 'de-DE' },
    { title: 'Hungarian', code: 'hu' },
    { title: 'Italian', code: 'it-IT' },
    { title: 'Maori (New Zealand)', code: 'mi-NZ' },
    { title: 'Norwegian Bokmål', code: 'nb-NO' },
    { title: 'Norwegian Nynorsk', code: 'nn' },
    { title: 'Polish', code: 'pl' },
    { title: 'Portuguese (Brazil)', code: 'pt-BR' },
    { title: 'Portuguese (Portugal)', code: 'pt-PT' },
    { title: 'Spanish', code: 'es' },
    { title: 'Swedish', code: 'sv-SE' },
    { title: 'Swedish (Finland)', code: 'sv-FI' }
  ],
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

云端安装

要在 Tiny Cloud 中启用 TinyMCE Enterprise Spellchecking 插件,请将 tinymcespellchecker 添加到 plugins 列表中。

使用 Tiny Cloud 时,服务器端拼写检查组件会自动配置,因此无需设置 spellchecker_rpc_url 参数。

示例:TinyMCE Cloud 安装

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_language: 'en-US'  // 注意:使用带连字符的 RFC5646 格式
});

自托管安装

要启用 TinyMCE Enterprise 拼写检查插件,请将 tinymcespellchecker 添加到 plugins 列表中。

有关安装用于拼写检查的服务器端组件的信息,请参阅使用 Docker 部署 TinyMCE 拼写服务服务器端组件。

自定义词典仅在使用自托管拼写服务时受支持。它们允许将额外的术语(如产品名称或技术词汇)视为拼写正确的单词。Tiny Cloud 上不提供自定义词典。有关详细信息,请参阅添加自定义词典。

示例:TinyMCE 自托管安装

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling',
  spellchecker_language: 'en-US'  // 注意:使用带连字符的 RFC5646 格式
});

使用方法

当用户在编辑器中输入内容时,TinyMCE Enterprise 拼写检查插件会自动激活。要为拼写错误的单词选择拼写建议,请右键单击该拼写错误的单词以打开上下文菜单。

选项

spellchecker_active

此选项在加载编辑器时启用或禁用拼写检查器。当设置为 false 时,在初始化编辑器时,拼写检查器将不会激活。必须由用户选择工具栏按钮或菜单项才能启动拼写检查器。

类型:Boolean

默认值:true

可能的值:true、false

示例:使用 spellchecker_active

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_active: true
});

spellchecker_dialog

此选项指定主要的拼写检查模式。

  • 当设置为 true 时,spellchecker 工具栏按钮将打开一个对话框,引导用户逐步处理文档中的每个潜在拼写错误。

  • 当设置为 false 时,spellchecker 工具栏按钮将启用或禁用即时拼写检查,而 spellcheckdialog 工具栏按钮将打开拼写检查器对话框。

类型:Boolean

默认值:false

可能的值:true、false

示例:使用 spellchecker_dialog

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  spellchecker_dialog: true
});

spellchecker_ignore_list

此选项指定拼写检查器应忽略哪些单词。如果提供了单词数组,则指定单词将对所有语言生效。如果提供了包含每种语言单词数组的对象,则指定单词仅对指定语言生效。

spellchecker_ignore_list 对象中作为键指定的语言必须与配置的拼写检查语言相匹配。

类型:Array 或 Object

持久化被忽略的单词

在编辑会话期间被忽略的单词 —— 通过 Ignore 或 Ignore All 菜单项,或者 addIgnoredWords API —— 仅应用于当前会话,在编辑器重新加载后不会保留。要跨会话持久化被忽略的单词,请将它们存储在宿主应用程序中(例如,在处理 SpellcheckerIgnore 和 SpellcheckerIgnoreAll 事件时),并在每次初始化编辑器时通过 spellchecker_ignore_list 选项重新应用它们。

示例:使用 spellchecker_ignore_list 忽略所有语言中的单词

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_ignore_list: [ 'tinymce', 'TinyMCE' ]
});

示例:使用 spellchecker_ignore_list 针对特定语言

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_ignore_list: {
    en_US: [ 'tinymce', 'TinyMCE' ],
    es: [ 'tinymce' ]
  }
});

spellchecker_language

自 TinyMCE 8.5 起,此选项已被标记为弃用。它将在未来的主要版本中被移除。请改用content_language,它会同时设置默认内容语言和拼写检查器的校对语言。

此选项指定拼写检查器使用的默认语言。

类型:String

默认值:'en-US'

示例:使用 spellchecker_language

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_language: 'de'  // 使用 ISO 语言代码,区域变体用连字符分隔(例如 'de-DE')
});

如果用户从拼写检查器语言工具栏下拉菜单中选择一种语言,该选择会保存到浏览器的本地存储中,并优先于 spellchecker_language 配置选项。本地存储值在浏览器会话之间持续有效,并将继续覆盖配置的设置。

调试语言问题:

  • 要检查特定设备的当前活动语言,请使用浏览器控制台:tinymce.activeEditor.plugins.tinymcespellchecker.getLanguage()

  • 如果集成人员或用户遇到 spellchecker_language 选项未被尊重的问题,他们可以:

    1. 打开浏览器开发者工具 (F12)

    2. 转到 Console 选项卡

    3. 运行 localStorage.clear() 以清除所有本地存储

    4. 刷新页面以重新初始化编辑器

有关 localStorage 的更多信息,请参阅 MDN Web Docs。

支持的语言

拼写检查器插件支持以下语言。对于使用 Tiny Cloud 上 TinyMCE 的客户,支持所有列出的语言。

语言代码与 TinyMCE 预先打包支持的 Hunspell 字典

Afrikaans (South Africa)

af-ZA

✖

✔

English (Australia)

en-AU

✖

✔

English (Canada)

en-CA

✖

✔

English (United Kingdom)

en-GB, en-UK, en-BR

✔

✔

English (United States)

en, en-US

✔

✔

Medical English (US)

en-medical, en-US-medical

✔

✔

Danish

da

✔

✔

Dutch

nl, nl-NL

✔

✔

Finnish

fi

✔

✖

French

fr

✔

✔

German

de, de-DE

✔

✔

Hungarian

hu

✖

✔

Italian

it, it-IT

✔

✔

Maori (New Zealand)

mi-NZ

✖

✔

Norwegian Bokmål

nb, nb-NO

✔

✔

Norwegian Nynorsk

nn

✖

✔

Polish

pl

✖

✔

Portuguese (Brazil)

pt, pt-BR

✔

✔

Portuguese (Portugal)

pt-PT

✔

✔

Spanish

es

✔

✔

Swedish

sv, sv-SE

✔

✔

Swedish (Finland)

sv-FI

✖

✔

spellchecker_languages

此选项指定供用户使用的拼写检查器语言,以逗号分隔的字符串形式提供。有关可用语言列表,请参阅:支持的语言。

类型: 逗号分隔的字符串。

默认值:

'English (United States)=en-US,English (United Kingdom)=en-GB,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Norwegian Bokmål=nb-NO,Norwegian Nynorsk=nn,Brazilian Portuguese=pt-BR,Portuguese=pt,Portuguese (Portugal)=pt-PT,Spanish=es,Swedish=sv,Swedish (Finland)=sv-FI,Afrikaans (South Africa)=af-ZA,English (Australia)=en-AU,English (Canada)=en-CA,English (United Kingdom)=en-GB,English (United States)=en-US,Medical English (US)=en-US-medical,Maori (New Zealand)=mi-NZ'

示例:使用 spellchecker_languages

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_languages: 'US English=en-US,UK English=en-GB,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Norwegian Bokmål=nb-NO,Norwegian Nynorsk=nn,Brazilian Portuguese=pt-BR,Portuguese=pt,Portuguese (Portugal)=pt-PT,Spanish=es,Swedish=sv,Swedish (Finland)=sv-FI,Afrikaans (South Africa)=af-ZA,English (Australia)=en-AU,English (Canada)=en-CA,English (United Kingdom)=en-GB,English (United States)=en-US,Medical English (US)=en-US-medical,Maori (New Zealand)=mi-NZ'
});

spellchecker_rpc_url

此选项指定服务器端 ephox-spelling 服务的 URL。有关如何设置拼写检查器服务器端组件的说明,请参阅:使用 Docker 部署 TinyMCE 拼写服务服务器端组件。

通过 Tiny Cloud 启用此插件时,spellchecker_rpc_url 是不必需的

类型: String

示例:使用 spellchecker_rpc_url

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  spellchecker_rpc_url: 'localhost/ephox-spelling'
});

content_langs

此选项设置 language 工具栏按钮和 language 菜单项中显示的语言。该选项接受一个语言规范数组。每个语言规范是一个使用以下属性定义的 JavaScript 对象。

名称类型要求描述

title

String

必需

在 UI 中显示的该语言名称。

code

String

必需

该语言的语言标签,如 语言标识标签(BCP47) 中所定义。此语言标签会放在使用该语言格式化的元素的 lang 属性中。

customCode

String

可选

一个替代的语言标签,无需与 BCP47 兼容。如果定义了此字符串,则会放在使用该语言格式化的元素的 data-mce-lang 属性中。

类型: Array

示例:使用 content_langs 更改拼写字典

Spell Checker 插件会使用 code 属性来确定在内容中使用哪个字典,除非 customCode 属性可用。由 customCode 指定的语言标签会覆盖拼写字典,以允许使用非标准语言,例如 Spell Checker 提供的医学字典。对于所有语言,请确保:

  • code 属性是有效的语言标签,根据 语言标识标签(BCP47)

  • code 属性是支持的语言之一,或者定义了 customCode 覆盖属性。

  • 如果定义了 customCode 属性,则它必须是支持的语言之一。

例如:

tinymce.init({
  selector: 'textarea',
  toolbar: 'language',
  plugins: 'tinymcespellchecker',
  content_langs: [
    { title: 'Afrikaans (South Africa)', code: 'af-ZA', customCode: 'af-ZA' },
    { title: 'English (Australia)', code: 'en-AU' },
    { title: 'English (Canada)', code: 'en-CA' },
    { title: 'English (United Kingdom)', code: 'en-GB' },
    { title: 'English (United States)', code: 'en-US' },
    { title: 'Medical English (US)', code: 'en-US', customCode: 'en-US-medical' },
    { title: 'Danish', code: 'da' },
    { title: 'Dutch', code: 'nl-NL' },
    { title: 'Finnish', code: 'fi' },
    { title: 'French', code: 'fr' },
    { title: 'German', code: 'de-DE' },
    { title: 'Hungarian', code: 'hu' },
    { title: 'Italian', code: 'it-IT' },
    { title: 'Maori (New Zealand)', code: 'mi-NZ' },
    { title: 'Norwegian Bokmål', code: 'nb-NO' },
    { title: 'Norwegian Nynorsk', code: 'nn' },
    { title: 'Polish', code: 'pl' },
    { title: 'Portuguese (Brazil)', code: 'pt-BR' },
    { title: 'Portuguese (Portugal)', code: 'pt-PT' },
    { title: 'Spanish', code: 'es' },
    { title: 'Swedish', code: 'sv-SE' },
    { title: 'Swedish (Finland)', code: 'sv-FI' }
  ],
});

工具栏按钮

Spell Checker 插件提供以下工具栏按钮:

工具栏按钮标识符描述

spellcheckdialog

如果 spellchecker_dialog 为 false,则打开拼写检查对话框,否则此按钮被禁用。

spellchecker

如果 spellchecker_dialog 为 true,则打开拼写检查对话框,否则此按钮启用或禁用输入时拼写检查。

可以使用以下方式将这些工具栏按钮添加到编辑器:

菜单项

Spell Checker 插件提供以下菜单项:

菜单项标识符默认菜单位置描述

spellchecker

工具

开启/关闭拼写检查器。

spellcheckerlanguage

工具

更改文档或当前选中文本的拼写检查过程使用的语言。

可以使用以下方式将这些菜单项添加到编辑器:

命令

Spell Checker 插件提供以下命令。

命令描述

mceSpellcheckEnable

开启拼写检查。

mceSpellcheckDisable

关闭拼写检查。

mceSpellcheckDialog

打开拼写检查对话框。

mceSpellcheckDialogClose

关闭拼写检查对话框。

mceSpellcheckUpdate

检查编辑器内容中的新拼写错误,将其高亮显示并提供拼写建议。

示例
tinymce.activeEditor.execCommand('mceSpellcheckEnable');
tinymce.activeEditor.execCommand('mceSpellcheckDisable');
tinymce.activeEditor.execCommand('mceSpellcheckDialog');
tinymce.activeEditor.execCommand('mceSpellcheckDialogClose');
tinymce.activeEditor.execCommand('mceSpellcheckUpdate');

事件

以下事件由 Spell Checker 插件提供。

名称数据描述

SpellcheckerIgnore

{ word: string }

当某个单词实例被标记为忽略时触发。

SpellcheckerIgnoreAll

{ word: string, language: string }

当某个单词(在某语言中)的所有实例被标记为忽略时触发。

SpellcheckError

{ message: string }

当发生拼写检查器错误(如无法连接到 Spell Checker 服务)时触发。

SpellcheckStart

N/A

当启用拼写检查时触发。

SpellcheckEnd

N/A

当禁用拼写检查时触发。

SpellcheckerLanguageChanged

{ language: string, prevLanguage: string }

当拼写检查语言变更时触发。

SpellcheckerUpdated

{ spelling: SpellingUpdate }

当编辑器内容经过拼写错误检查,并在 spelling 对象中包含建议时触发。

SpellcheckerIgnore 事件

当用户对拼写错误的单词选择 Ignore 时触发此事件。

示例:SpellcheckerIgnore 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerIgnore', (e) => {
      console.log('忽略单词', e.word);
    });
  }
});

SpellcheckerIgnoreAll 事件

当用户对拼写错误的单词选择 Ignore All 时触发此事件。

示例:SpellcheckerIgnoreAll 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerIgnoreAll', (e) => {
      console.log('忽略所有实例单词', e.word, e.language);
    });
  }
});

SpellcheckStart 事件

当用户启用 spellchecker 时触发此事件。

示例:SpellcheckStart 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckStart', (e) => {
      console.log('开始拼写检查');
    });
  }
});

SpellcheckEnd 事件

当用户禁用 spellchecker 时触发此事件。

示例:SpellcheckEnd 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckEnd', (e) => {
      console.log('停止拼写检查');
    });
  }
});

SpellcheckError 事件

当发生拼写检查器错误(如无法连接到 Spell Checker 服务)时触发此事件。

示例:SpellcheckError 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckError', (e) => {
      console.log('拼写服务错误:' + e.message);
    });
  }
});

SpellcheckerLanguageChanged 事件

当拼写检查语言变更时触发此事件。

示例:SpellcheckerLanguageChanged 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerLanguageChanged', (e) => {
      console.log(`拼写语言已变更:${e.language}。先前语言:${e.prevLanguage}`);
    });
  }
});

SpellcheckerUpdated 事件

当编辑器内容通过打开 Spell Checker 对话框或执行 mceSpellcheckUpdate 命令进行拼写错误检查和提供建议时触发。

当 Spell Checker 以 As-You-Type 模式运行时,此事件不会触发。

示例:SpellcheckerLanguageChanged 事件

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymcespellchecker',
  toolbar: 'spellchecker',
  init_instance_callback: (editor) => {
    editor.on('SpellcheckerUpdated', (e) => {
      const spelling = e.spelling;
      for (const [ language, words ] of Object.entries(spelling)) {
        for (const [ word, suggestions ] of Object.entries(words)) {
          console.log(`${language} suggestions for ${word}:`, suggestions);
        }
      }
    });
  }
});

spelling 对象

spelling 对象由 SpellcheckerUpdated 事件提供,包含拼写服务 spellcheck 的结果。

最外层对象的键是每个已检查语言的语言代码(使用 RFC5646 格式,例如 'en-US'、'es-ES')。

每个返回的语言代码下都有一个对象,其中

  • 键表示拼写错误的单词;

  • 值数组表示可能的正确拼写。

示例:spelling 对象
spelling: {
  en: {
    riddiculed: [ 'ridiculed', 'ridicule' ],
    impossable: [ 'impossible', 'impassable', 'impassible' ]
  },
  es: {
    impossible: [ 'impasible', 'imposible', 'imposibles', 'imposibilite' ],
    designate: [ 'desnate', 'designativo', 'designa-te', 'designare' ],
    moment: [ 'momento', 'momentito', 'omento', 'memento' ]
  }
}

API

Spell Checker 插件提供以下 API。

名称参数说明

addIgnoredWords

words: string[], lang?: string

将单词数组添加到特定语言的 spellchecker_ignore_list。如果省略 lang 参数,则将单词数组添加到所有语言。

getLanguage

不适用

获取当前启用的拼写检查语言。

setLanguage

language: string

设置当前拼写检查语言。这必须是一个受支持的语言代码(区分大小写)。有关受支持语言的列表,请参阅:Spell Checker - Supported languages。

getSpellingErrors

不适用

返回一个对象数组,表示编辑器内容中每个现有的拼写错误单词,每个对象使用 language 和 word 作为键。

示例
// 忽略所有语言的单词
tinymce.activeEditor.plugins.tinymcespellchecker.addIgnoredWords(['tinymce']);

// 忽略特定语言的单词
tinymce.activeEditor.plugins.tinymcespellchecker.addIgnoredWords(['TinyMCE', 'tinymce'], 'en_us');

// 获取拼写检查使用的当前语言
tinymce.activeEditor.plugins.tinymcespellchecker.getLanguage();

// 将当前语言设置为特定语言
tinymce.activeEditor.plugins.tinymcespellchecker.setLanguage('sv');  // 例如瑞典语

// 检索编辑器中所有拼写错误的单词
tinymce.activeEditor.plugins.tinymcespellchecker.getSpellingErrors();