Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 525

AEM 62 - Touch UI Content Fragment Editor RTE Spell Check Plugin

$
0
0

Goal


Add Spell Check to the Rich Text Editor of Content Fragments. New in AEM 62, learn more about content fragments here

Demo | Package Install


The Plugin



Mistakes Underlined Red



No Mistakes



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-cfm-rte-spellcheck-plugin

2) Create node /apps/eaem-touchui-cfm-rte-spellcheck-plugin/clientlib of type cq:ClientLibraryFolder, add String property categories with value dam.cfm.authoring.editors, String[] property dependencies with value underscore, granite.shared

3) Create file (nt:file) /apps/eaem-touchui-cfm-rte-spellcheck-plugin/clientlib/js.txt, add

            /etc/clientlibs/granite/coralui2/optional/rte/js/components/rte/plugins/AbstractSpellCheckerPlugin.js
            /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/RTE.SpellCheckerPlugin.js
            cfm-rte-spellcheck.js

4) Create file (nt:file) /apps/eaem-touchui-cfm-rte-spellcheck-plugin/clientlib/cfm-rte-spellcheck.js, add the following code

(function ($, $document) {
var SPELL_CHECK_URL = "/libs/cq/ui/rte/spellcheck",
SPELL_CHECK_PLUGIN = "spellcheck",
SPELL_CHECK_CHECK_TEXT = "checktext",
pluginAdded = false;

$document.on("cfm:contentchange", addSpellCheckPlugin);

function addSpellCheckPlugin(event, data) {
if (pluginAdded) {
return;
}

var editor = data.editor;

if (!(editor instanceof Dam.CFM.StyledTextEditor)) {
return;
}

pluginAdded = true;

var ek = editor.rte.getEditorKernel(),
$toolbar = editor.$toolbar,
spellCheckPlugin = getMockSpellCheckPlugin(ek);

$toolbar.append(getSpellCheckHtml());

var scElem = new CUI.rte.ui.stub.ElementImpl(SPELL_CHECK_CHECK_TEXT, spellCheckPlugin, true);

scElem.notifyToolbar(ek.toolbar);

editor.$editor.on("click", function () {
scElem.plugin.clearInvalidationMarks(ek.editContext);
});

scElem.$el.on("click.rte-handler", function () {
performSpellCheck(ek.getProcessedHtml());
});
}

function getSpellCheckHtml(){
return '<div>' +
'<button is="coral-button" variant="quiet" icon="'
+ SPELL_CHECK_PLUGIN + '" iconsize="S" data-rte-command="'
+ SPELL_CHECK_CHECK_TEXT + '">' +
'</button>' +
'</div>';
}

function getMockSpellCheckPlugin(editorKernel){
var spellCheckPlugin = new CUI.rte.plugins.SpellCheckerPlugin(editorKernel, SPELL_CHECK_PLUGIN);

spellCheckPlugin.config = {
method: "POST",
spellcheckerUrl: SPELL_CHECK_URL,
invalidStyle: "border-bottom: dotted red;"
};

spellCheckPlugin.checkTextUI = {
setHighlighted: function(){}
};

return spellCheckPlugin;
}

function performSpellCheck(content){
$.ajax({
url: SPELL_CHECK_URL,
data: {
"_charset_": "utf-8",
"mode": "text",
"html": "true",
"text": content
}
}).done(handler);

function handler(spellCheckResults){
if(!_.isEmpty(spellCheckResults.words)){
return;
}

showMessageBox("No mistakes found", "Spellcheck");
}
}

function showMessageBox(message, title){
var fui = $(window).adaptTo("foundation-ui"),
options = [{
text: "OK",
primary: true
}];

message = message || "Ok";
title = title || "Ok";

fui.prompt(title, message, "success", options);
}
}(jQuery, jQuery(document)));


Viewing all articles
Browse latest Browse all 525

Trending Articles