带有拼写检查器的CodeMirror

Question

我想使用CodeMirror的功能(例如,亚麻,包装,搜索等)用于纯文本,而不需要代码突出显示,而是使用谷歌Chrome拼写检查或其他一些自然语言(特别是英语)拼写检查激活(我不需要让它在其他浏览器上工作).我怎样才能做到这一点？是否可以编写一个支持拼写检查的纯文本模式加载项？

Answer 1

我实际上在编写NoTex.ch时将typo.js与CodeMirror集成在一起 ; 你可以在这里查看它CodeMirror.rest.js ; 我需要一种方法来检查reStructuredText标记拼写,因为我使用CodeMirror的优秀语法高亮功能,所以非常直接.

您可以在提供的链接中查看代码,但我会总结一下,我做了什么:

1. 初始化typo.js库; 另见作者的博客/文档:

   var typo = new Typo ("en_US", AFF_DATA, DIC_DATA, {
       platform: 'any'
   });
   

2. 为单词分隔符定义正则表达式:

   var rx_word = "!\"#$%&()*+,-./:;<=>?@[\\\\\\]^_`{|}~";
   

3. 为CodeMirror定义覆盖模式:

   CodeMirror.defineMode ("myoverlay", function (config, parserConfig) {
       var overlay = {
           token: function (stream, state) {
   
               if (stream.match (rx_word) &&
                   typo && !typo.check (stream.current ()))
   
                   return "spell-error"; //CSS class: cm-spell-error
   
               while (stream.next () != null) {
                   if (stream.match (rx_word, false)) return null;
               }
   
               return null;
           }
       };
   
       var mode = CodeMirror.getMode (
           config, parserConfig.backdrop || "text/x-myoverlay"
       );
   
       return CodeMirror.overlayMode (mode, overlay);
   });
   

4. 将覆盖与CodeMirror一起使用; 请参阅用户手册以了解您的具体操作方式.我已经在我的代码中完成了它,所以你也可以在那里查看它,但我推荐用户手册.

5. 定义CSS类:

   .CodeMirror .cm-spell-error {
        background: url(images/red-wavy-underline.gif) bottom repeat-x;
   }
   

这种方法适用于德语,英语和西班牙语.使用法语词典,typo.js似乎有一些(重音)问题,而且语言如希伯来语,匈牙利语和意大利语 - 其中词缀的数量很长或字典非常广泛 - 它不起作用,因为typo.js在其当前实现中使用太多内存并且太慢.

德国(和西班牙语)typo.js可以阻止JavaScript的VM几百毫秒(但只能在初始化!),所以你可能要考虑与HTML5网页工人后台线程(见CodeMirror.typo.worker.js为例).更进一步的typo.js似乎不支持Unicode(由于JavaScript限制):至少,我没有设法使用非拉丁语言,如俄语,希腊语,印地语等.

除了(现在相当大)NoTex.ch之外,我没有将所描述的解决方案重构为一个很好的独立项目,但我可能很快就会这样做; 在此之前,您需要根据上述说明或暗示代码修补自己的解决方案.我希望这有帮助.

Answer 2

在 CodeMirror 5.18.0 及更高版本中，您可以设置inputStyle: 'contenteditable'以便spellcheck: true能够使用网络浏览器的拼写检查功能。例如：

var myTextArea = document.getElementById('my-text-area');
var editor = CodeMirror.fromTextArea(myTextArea, {
    inputStyle: 'contenteditable',
    spellcheck: true,
});

使该解决方案成为可能的相关提交是：

• 将 inputStyle 设置为选项，将相关逻辑移至 TextareaInput（CodeMirror 5.0.0，2015 年 2 月）
• 添加实验性拼写检查选项（CodeMirror 5.18.0，2016 年 8 月）