#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.
- Как я могу сопоставить CKEditor dom, переданный вышеупомянутым функциям, с summernote?
- Как я могу создать контекстное меню sugession в summernote?(Есть ли пользовательское контекстное меню в summernote?)
Кто-нибудь уже интегрировал ATD с summernote. Все без исключения предложения / альтернативные решения приветствуются.
Комментарии:
1. Вопрос: Я не знаком ни с одним из плагинов, но это редактор wysiwyg, верно? .. итак … почему контекстное меню должно быть интегрировано? что, если вы разработаете контекстное меню вне всех плагинов? .. тогда вы можете настроить таргетинг на любой контейнер, который у вас есть, и готово…
2. Создайте jsfiddle, чтобы мы могли над этим поработать…
3. Я пытался создать jsfiddle с summernote и его плагином, но не могу заставить summernote работать на jsfiddle. может быть, я не знаю, как это сделать в jsfiddle.
4. Жаль, я не думаю, что кто-нибудь сможет вам тогда помочь… либо вы выполняете jsfiddle, либо публикуете сайт где-нибудь, доступном для других, это довольно сложно начинать с нуля. Удачи.