Интеграция проверки грамматики в summernote с After the Deadline

#jquery #summernote

#jquery — jquery — запрос #summernote

Вопрос:

Чего я хочу?


Я пытаюсь интегрировать проверку грамматики в плагин Summernote, используя По истечении крайнего срока.

Что я сделал до сих пор?


В соответствии с этим руководством я загрузил сервер ATD и успешно запустил сервер. Также успешно проверьте грамматику в текстовой области моей HTML-страницы.

Теперь я начал интегрировать его с summernote. Моей ссылкой был плагин для CKEditor, который уже интегрирован с ATD, который доступен Здесь. Я также отсылаю страницу Добавить грамматику и проверку орфографии к любому редактору WYSIWYG

Я скачал плагин CKEditor для ATD и модифицировал его для работы с summernote. Наконец мне удается добавить новый плагин в summernote и там добавить пользовательскую кнопку toolbox в summernote. Приведенный ниже код плагина Summernote

 $.extend($.summernote.plugins, {
    /**
     * @param {Object} context - context object has status of editor.
     */
    'spellcheck': function (context) {
        var self = this;
        // ui has renders to build ui elements.
        //  - you can create a button with `ui.button`
        var ui = $.summernote.ui;
        context.memo('button.spellcheck', function () {
            // create button
            var button = ui.button({
                contents: '<img src="../../atd-ckeditor-master/images/atdbuttontr.gif" alt="">',
                tooltip: 'Check spelling and grammar',
                click: function () {
                    // invoke insertText method with 'hello' on editor module.
                    var $editor = context.layoutInfo.note;
                    var layoutInfo = context.layoutInfo;
                    var proofread_action = setupSummerNoteInstance($editor, this.path, layoutInfo);
                }
            });
            // create jQuery object from button instance.
            var $hello = button.render();
            return $hello;
        });
    }
});
  

Когда пользователь нажимает пользовательскую кнопку, возвращаются данные из редактора, отправка на сервер проверки грамматики и результат.
Я передаю дату summernote в atd_core, преобразуя данные следующим образом

 var divSummer = document.createElement('div');
 divSummer.innerHTML = editor.summernote('code').trim();
 atd_core.markMyWords(divSummer.childNodes, results.errors);
  

До этого момента все работает.

Проблемная Область


Проблема заключается в отображении возвращенного результата с сервера проверки грамматики с помощью контекстного меню стилей и предложений в редакторе summernote. Я пытаюсь сопоставить привязки данных, специфичные для плагина CKEditor, с summernote для следующих функций (вот весь plugin.js файл CKEditor, на который я ссылаюсь).

 var load_AtD_core = function (success) {
    atd_core = new AtDCore();
    /* initialize all functions that AtD/Core will require */
    atd_core.map = function (array, callback) {
        for (var x = 0; x < array.length; x  ) {
            callback(array[x]);
        }
    };
    atd_core.hasClass = function (node, className) {
        return node != null amp;amp; node.nodeType != 3 amp;amp; CKEDITOR.dom.element.get(node).hasClass(className);
    };
    atd_core.contents = function (node) {
        if (node.$)
            return node.$.childNodes;
        return node.childNodes;
    };
    atd_core.replaceWith = function (old_node, new_node) {
        return new_node.replace(CKEDITOR.dom.element.get(old_node));
    };
    atd_core.create = function (node_html) {
        return CKEDITOR.dom.element.createFromHtml('<span class="mceItemHidden">'   node_html   '</span>');
    };
    atd_core.removeParent = function (node) {
        return CKEDITOR.dom.element.get(node).remove(true);
    };
    atd_core.remove = function (node) {
        return CKEDITOR.dom.element.get(node).remove(false);
    };
    atd_core.getAttrib = function (node, key) {
        return CKEDITOR.dom.element.get(node).getAttribute(key);
    };
    atd_core.findSpans = function (parent) {
        var results = [];
        var elements = editor.document.getElementsByTag('span');
        for (var x = 0; x < elements.count(); x  )
            results.push(elements.getItem(x).$);
        return results;
    };
    /* set options */
    atd_core.showTypes('Bias Language,Cliches,Complex Expression,Diacritical Marks,Double Negatives,Hidden Verbs,Jargon Language,Passive voice,Phrases to Avoid,Redundant Expression');
}
  

здесь они манипулируют CKEDITOR.dom, но мне не удалось получить элементы dom summernote.

  1. Как я могу сопоставить CKEditor dom, переданный вышеупомянутым функциям, с summernote?
  2. Как я могу создать контекстное меню sugession в summernote?(Есть ли пользовательское контекстное меню в summernote?)

Кто-нибудь уже интегрировал ATD с summernote. Все без исключения предложения / альтернативные решения приветствуются.

Комментарии:

1. Вопрос: Я не знаком ни с одним из плагинов, но это редактор wysiwyg, верно? .. итак … почему контекстное меню должно быть интегрировано? что, если вы разработаете контекстное меню вне всех плагинов? .. тогда вы можете настроить таргетинг на любой контейнер, который у вас есть, и готово…

2. Создайте jsfiddle, чтобы мы могли над этим поработать…

3. Я пытался создать jsfiddle с summernote и его плагином, но не могу заставить summernote работать на jsfiddle. может быть, я не знаю, как это сделать в jsfiddle.

4. Жаль, я не думаю, что кто-нибудь сможет вам тогда помочь… либо вы выполняете jsfiddle, либо публикуете сайт где-нибудь, доступном для других, это довольно сложно начинать с нуля. Удачи.