What I want?
I am trying to integrate grammar check in Summernote Plugin using After the deadline.
What I have done so far?
As per this tutorial I downloaded the ATD Server and successfully run the server. Also successfully check grammar from a text area from my html page.
Now I started integrating it with the summernote. My reference was a plugin for CKEditor which is already integrated with ATD which is available Here. I also refer the page Add Grammar and Spell Check to Any WYSIWYG Editor
I downloaded the CKEditor plugin for ATD and modified it to work with summernote. Finally I manage to add a new plugin to summernote and there by add a custom toolbox button in summernote. Summernote plugin code below
$.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;
});
}
});
When user click the custom button, the data from editor, post to the grammar check server and result is returned. I pass the summernote date to atd_core by converting data like this
var divSummer = document.createElement('div');
divSummer.innerHTML = editor.summernote('code').trim();
atd_core.markMyWords(divSummer.childNodes, results.errors);
Till this point everything is working.
Problem Area
Problem is with displaying the returned result from grammar check server with styles and suggestion context menu within summernote editor. I'm trying to map CKEditor plugin specific data bindings to summernote for the following functions(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');
}
here they are manipulating the CKEDITOR.dom but i'm not successful in getting the dom elements of summernote.
- How can i map the CKEditor dom passed to the above functions corresponds to summernote?
- How can i create a sugession context menu in summernote?(Is there a custom context menu in summernote?)
Have anyone already integrate ATD with summernote. All and every suggestions/alternative solutions are welcome.