此插件仅适用于 付费 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: “Though you be swift as the wind, I will beeat you in a race.” 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ía, una liebre ridiculizó los pies cortos y el ritmo lento de la tortuga, quien respondió riendo: "Aunque seas veloz como el viento, te venceré en una carrera". La Liebre, creyendo que su afirmación era simplemente imposible, asintió a la propuesta; y acordaron que Fox debería elegir el curso y fijar el objetivo. El día designado para la carrera, los dos comenzaron juntos. La Tortuga nunca se detuvo por un momento, sino que continuó con un ritmo lento pero constante hasta el final del curso. La Liebre, acostada en el camino, se quedó profundamente dormida. Al despertarse y moverse lo más rápido que pudo, vio que la Tortuga había alcanzado la meta y dormitaba cómodamente despué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öte</span></h1> <p><span lang="de">Eines Tages hat ein Hase die kurzen Füße und das langsame Tempo der Schildkrö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öglich, stimmte dem Vorschlag zu; und sie waren sich einig, dass der Fuchs den Kurs wählen und das Gefängnis reparieren sollte. An dem für das Rennen festgelegten Tag starteten die beiden zusammen. Die Schildkröte hörte nie fü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öte das Ziel erreicht hatte und nach ihrer Müdigkeit bequem döste.</span></p> <p><span lang="de">Langsam aber stetig gewinnt das Rennen.</span></p> <p> </p> <p><strong>Based on:</strong> Aesop, 'Aesop’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选项未被尊重的问题,他们可以:
打开浏览器开发者工具 (F12)
转到 Console 选项卡
运行
localStorage.clear()以清除所有本地存储刷新页面以重新初始化编辑器
有关 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 对象。
| 名称 | 类型 | 要求 | 描述 |
|---|---|---|---|
| String | 必需 | 在 UI 中显示的该语言名称。 |
| String | 必需 | 该语言的语言标签,如 语言标识标签(BCP47) 中所定义。此语言标签会放在使用该语言格式化的元素的 |
| String | 可选 | 一个替代的语言标签,无需与 BCP47 兼容。如果定义了此字符串,则会放在使用该语言格式化的元素的 |
类型: 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 插件提供以下工具栏按钮:
| 工具栏按钮标识符 | 描述 |
|---|---|
| 如果 |
| 如果 |
可以使用以下方式将这些工具栏按钮添加到编辑器:
toolbar配置选项。quickbars_insert_toolbar配置选项。
菜单项
Spell Checker 插件提供以下菜单项:
| 菜单项标识符 | 默认菜单位置 | 描述 |
|---|---|---|
| 工具 | 开启/关闭拼写检查器。 |
| 工具 | 更改文档或当前选中文本的拼写检查过程使用的语言。 |
可以使用以下方式将这些菜单项添加到编辑器:
menu配置选项。contextmenu配置选项。
命令
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 |
| 当某个单词实例被标记为忽略时触发。 |
SpellcheckerIgnoreAll |
| 当某个单词(在某语言中)的所有实例被标记为忽略时触发。 |
SpellcheckError |
| 当发生拼写检查器错误(如无法连接到 Spell Checker 服务)时触发。 |
SpellcheckStart | N/A | 当启用拼写检查时触发。 |
SpellcheckEnd | N/A | 当禁用拼写检查时触发。 |
SpellcheckerLanguageChanged |
| 当拼写检查语言变更时触发。 |
SpellcheckerUpdated |
| 当编辑器内容经过拼写错误检查,并在 |
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: | 将单词数组添加到特定语言的 |
getLanguage | 不适用 | 获取当前启用的拼写检查语言。 |
setLanguage | language: | 设置当前拼写检查语言。这必须是一个受支持的语言代码(区分大小写)。有关受支持语言的列表,请参阅:Spell Checker - |
getSpellingErrors | 不适用 | 返回一个对象数组,表示编辑器内容中每个现有的拼写错误单词,每个对象使用 |
// 忽略所有语言的单词
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();