我想要什么?
我正在尝试使用Summernote Plugin将语法检查集成到After the deadline中。
到目前为止我做了什么?
根据this tutorial,我下载了ATD服务器并成功运行了该服务器。还可以从我的html页面的文本区域成功检查语法。
现在,我开始将其与summernote集成在一起。我的参考是CKEditor的插件,该插件已与Here可用的ATD集成。我也参考了页面Add Grammar and Spell Check to Any WYSIWYG Editor
我下载了用于ATD的CKEditor插件,并对其进行了修改以与summernote一起使用。最后,我设法在summernote中添加了一个新插件,并在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,用于以下功能(here is the whole plugin.js file of CKEditor which i refer)。
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 && node.nodeType != 3 && 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,但是我无法成功获取summernote的dom元素。
已经有人将ATD与summernote集成了。欢迎所有建议/替代解决方案。