CodeMirror с проверкой орфографии

Я хотел бы использовать функции CodeMirror (например, нумерация строк, упаковка, поиск и т. д.) для обычного текста, без особой необходимости выделения кода, но вместо этого с помощью Google Chrome spell checker или какого-либо другого естественного языка (особенно английского) проверка орфографии активирована (мне не нужно, чтобы она работала в других браузерах). Как я могу это сделать? Можно ли написать надстройку в текстовом режиме, которая позволяет проверять орфографию?

5 ответов


Я на самом деле интегрированы опечатка.js С CodeMirror при кодировании для NoTex.ch; вы можете посмотреть на него здесь CodeMirror.остальное.js; мне нужен был способ получить reStructuredText проверено заклинание разметки, и поскольку я использую отличные возможности подсветки синтаксиса CodeMirror, это было довольно просто сделать.

вы можете проверить код по предоставленной ссылке, но я подытожим, что я сделал:

  1. инициализировать опечатка.библиотека 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;
    }
    

этот подход отлично подходит для немецкого, английского и испанского языков. С французским словарем опечатка.js кажется, есть некоторые (акцентные) проблемы, и языки, такие как иврит, венгерский и итальянский - где количество аффиксов длинное или словарь довольно обширный - он не работает на самом деле, так как опечатка.js при его текущей реализации используется слишком много памяти и слишком медленно.

с немецким (и испанским) опечатка.js может блокировать JavaScript VM в течение нескольких сотен миллисекунд (но только во время инициализации!), поэтому вы можете рассмотреть фоновые потоки с веб-работниками HTML5 (см. CodeMirror.опечатка.работник.js для примера). Далее опечатка.js не поддерживает Unicode (из-за ограничений JavaScript): по крайней мере, мне не удалось чтобы заставить его работать с нелатинскими языками, как русский, греческий, хинди и т. д.

Я не переработал описанное решение в хороший отдельный проект, кроме (теперь довольно большого) NoTex.ch, но я мог бы сделать это довольно скоро; до тех пор вы должны исправить свое собственное решение на основе приведенного выше описания или намекнутого кода. Надеюсь, это поможет.


Это рабочая версия ответа hsk81. Он использует режим наложения CodeMirror и ищет любое слово внутри кавычек, HTML-тегов и т. д. В нем есть образец опечатки.проверьте, что должно быть заменено чем-то вроде опечатка.js. Он подчеркивает неизвестные слова красной волнистой линией.

Это было протестировано с использованием ячейки %%html IPython.

<style>
.CodeMirror .cm-spell-error {
     background: url("https://raw.githubusercontent.com/jwulf/typojs-project/master/public/images/red-wavy-underline.gif") bottom repeat-x;
}
</style>

<h2>Overlay Parser Demo</h2>
<form><textarea id="code" name="code">
</textarea></form>

<script>
var typo = { check: function(current) {
                var dictionary = {"apple": 1, "banana":1, "can't":1, "this":1, "that":1, "the":1};
                return current.toLowerCase() in dictionary;
            }
}

CodeMirror.defineMode("spell-check", function(config, parserConfig) {
    var rx_word = new RegExp("[^\!\"\#$\%\&\(\)\*\+\,\-\.\/\:\;\<\=\>\?\@\[\\]\^\_\`\{\|\}\~\ ]");
    var spellOverlay = {
        token: function (stream, state) {
          var ch;
          if (stream.match(rx_word)) { 
            while ((ch = stream.peek()) != null) {
                  if (!ch.match(rx_word)) {
                    break;
                  }
                  stream.next();
            }
            if (!typo.check(stream.current()))
                return "spell-error";
            return null;
          }
          while (stream.next() != null && !stream.match(rx_word, false)) {}
          return null;
        }
    };

  return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), spellOverlay);
});

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "spell-check"});
</script>

CodeMirror не основан на HTML textarea, поэтому вы невозможно использовать встроенную проверку орфографии

вы можете реализовать свою собственную проверку орфографии для CodeMirror с чем-то вроде опечатка.js

Я не верю, что кто-то сделал это еще.


Я написал волнистый подчеркивание типа проверки орфографии некоторое время назад. Это нужно переписать, чтобы быть честным, я был очень новым для JavaScript тогда. Но все принципы существуют.

https://github.com/jameswestgate/SpellAsYouType


Я создал проверку орфографии с предложениями/исправлениями опечаток:

https://gist.github.com/kofifus/4b2f79cadc871a29439d919692099406

демо:https://plnkr.co/edit/0y1wCHXx3k3mZaHFOpHT

Ниже приведены соответствующие части кода:

сначала я обещаю загрузить словари. Я использую опечатку.JS для словаря, загрузка может занять некоторое время, если они не хранятся локально, так что лучше начать загрузка, как только начнется перед входом в систему / CM инициализация и т. д.:

function loadTypo() {
    // hosting the dicts on your local domain will give much faster results
    const affDict='https://rawgit.com/ropensci/hunspell/master/inst/dict/en_US.aff';
    const dicDict='https://rawgit.com/ropensci/hunspell/master/inst/dict/en_US.dic';

    return new Promise(function(resolve, reject) {
        var xhr_aff = new XMLHttpRequest();
        xhr_aff.open('GET', affDict, true);
        xhr_aff.onload = function() {
            if (xhr_aff.readyState === 4 && xhr_aff.status === 200) {
                //console.log('aff loaded');
                var xhr_dic = new XMLHttpRequest();
                xhr_dic.open('GET', dicDict, true);
                xhr_dic.onload = function() {
                    if (xhr_dic.readyState === 4 && xhr_dic.status === 200) {
                        //console.log('dic loaded');
                        resolve(new Typo('en_US', xhr_aff.responseText, xhr_dic.responseText, { platform: 'any' }));
                    } else {
                        console.log('failed loading aff');
                        reject();
                    }
                };
                //console.log('loading dic');
                xhr_dic.send(null);
            } else {
                console.log('failed loading aff');
                reject();
            }
        };
        //console.log('loading aff');
        xhr_aff.send(null);
    });
}

во-вторых, я добавляю наложение для обнаружения и пометки опечаток следующим образом:

cm.spellcheckOverlay={
    token: function(stream) {
        var ch = stream.peek();
        var word = "";

        if (rx_word.includes(ch) || ch==='\uE000' || ch==='\uE001') {
            stream.next();
            return null;
        }

        while ((ch = stream.peek()) && !rx_word.includes(ch)) {
            word += ch;
            stream.next();
        }

        if (! /[a-z]/i.test(word)) return null; // no letters
        if (startSpellCheck.ignoreDict[word]) return null;
        if (!typo.check(word)) return "spell-error"; // CSS class: cm-spell-error
    }
}
cm.addOverlay(cm.spellcheckOverlay);

третий я использую список, чтобы показать предложения и исправить опечатки:

function getSuggestionBox(typo) {
    function sboxShow(cm, sbox, items, x, y) {
        let selwidget=sbox.children[0];

        let options='';
        if (items==='hourglass') {
            options='<option>&#8987;</option>'; // hourglass
        } else {
            items.forEach(s => options += '<option value="' + s + '">' + s + '</option>');
            options+='<option value="##ignoreall##">ignore&nbsp;all</option>';
        }
        selwidget.innerHTML=options;
        selwidget.disabled=(items==='hourglass');
        selwidget.size = selwidget.length;
        selwidget.value=-1;

        // position widget inside cm
        let cmrect=cm.getWrapperElement().getBoundingClientRect();
        sbox.style.left=x+'px';  
        sbox.style.top=(y-sbox.offsetHeight/2)+'px'; 
        let widgetRect = sbox.getBoundingClientRect();
        if (widgetRect.top<cmrect.top) sbox.style.top=(cmrect.top+2)+'px';
        if (widgetRect.right>cmrect.right) sbox.style.left=(cmrect.right-widgetRect.width-2)+'px';
        if (widgetRect.bottom>cmrect.bottom) sbox.style.top=(cmrect.bottom-widgetRect.height-2)+'px';
    }

    function sboxHide(sbox) {
        sbox.style.top=sbox.style.left='-1000px';  
    }

    // create suggestions widget
    let sbox=document.getElementById('suggestBox');
    if (!sbox) {
        sbox=document.createElement('div');
        sbox.style.zIndex=100000;
        sbox.id='suggestBox';
        sbox.style.position='fixed';
        sboxHide(sbox);

        let selwidget=document.createElement('select');
        selwidget.multiple='yes';
        sbox.appendChild(selwidget);

        sbox.suggest=((cm, e) => { // e is the event from cm contextmenu event
            if (!e.target.classList.contains('cm-spell-error')) return false; // not on typo

            let token=e.target.innerText;
            if (!token) return false; // sanity

            // save cm instance, token, token coordinates in sbox
            sbox.codeMirror=cm;
            sbox.token=token;
            let tokenRect = e.target.getBoundingClientRect();
            let start=cm.coordsChar({left: tokenRect.left+1, top: tokenRect.top+1});
            let end=cm.coordsChar({left: tokenRect.right-1, top: tokenRect.top+1});
            sbox.cmpos={ line: start.line, start: start.ch, end: end.ch};

            // show hourglass
            sboxShow(cm, sbox, 'hourglass', e.pageX, e.pageY);

            // let  the ui refresh with the hourglass & show suggestions
            setTimeout(() => { 
                sboxShow(cm, sbox, typo.suggest(token), e.pageX, e.pageY); // typo.suggest takes a while
            }, 100);

            e.preventDefault();
            return false;
        });

        sbox.onmouseleave=(e => { 
            sboxHide(sbox)
        });

        selwidget.onchange=(e => {
            sboxHide(sbox)
            let cm=sbox.codeMirror, correction=e.target.value;
            if (correction=='##ignoreall##') {
                startSpellCheck.ignoreDict[sbox.token]=true;
                cm.setOption('maxHighlightLength', (--cm.options.maxHighlightLength) +1); // ugly hack to rerun overlays
            } else {
                cm.replaceRange(correction, { line: sbox.cmpos.line, ch: sbox.cmpos.start}, { line: sbox.cmpos.line, ch: sbox.cmpos.end});
                cm.focus();
                cm.setCursor({line: sbox.cmpos.line, ch: sbox.cmpos.start+correction.length});
            }
        });

        document.body.appendChild(sbox);
    }

    return sbox;
}

надеюсь, что это помогает !