lotusSpellChecker and ckeditor Xpages? - ckeditor

I'd like to activate the spellcheck plugin in CKEditor but it seems that IBM has disabled the native plugin.
Looking at the config.js in the data\domino\html\ckeditor directory on the Domino server I see this code describing a plugin called lotusSpellChecker but enabling this plugin doesn't seem to do anything.
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
Does anybody know how to activate this plugin and why the native one has been disabled?

I've only successfully activated the built-in spell checker by downloading the latest CKEditor release, copying it to the server and using that on an Xpage. See my post on the XPage forum for details:
http://www-10.lotus.com/ldd/xpagesforum.nsf/topicThread.xsp?action=openDocument&documentId=A198C7153DBD84348525798B0056DC6B
I've tried activating it in the default CKEditor installation but couldn't get it to work.

I can't make an official statement as to why it is disabled, but it is most likely for licensing reasons.
CKEditor uses Web Spell Checker. Details are here.
http://www.webspellchecker.net/

The plugin can be activated by making some changes to the config.js file located in the ckeditor folder. Uncomment the folowing block:
//Example Lotus Spell Checker config.
/*
config.extraPlugins += ',lotusspellchecker';
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
*/
Note: you need to provide the restUrl of whatever spell checking service you are going to use. Instructions here only solve the "how to activate plugin" question.
You also need to provide some Dojo properties in your rich text control:
This one adds the spell check button (LotusSpellChecker) to the toolbar.
Property name: toolbar
Property value: var myToolbar = "[['Format', 'Font','FontSize'], \n"
+"['Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList'], \n"
+"['Indent','Outdent'], \n"
+"['Subscript','Superscript'], \n"
+"['RemoveFormat', '-','MenuPaste','-','Undo','Redo','Find','LotusSpellChecker','-','Image','Table','Link','Flash','-','PageBreak','HorizontalRule','SpecialChar','Blockquote','Smiley','ShowBlocks'], \n"
+"['BidiLtr','BidiRtl'], \n"
+"['Maximize']]";
return myToolbar;
This one activates the plugin.
Property name: extraPlugins
Property value: lotusspellchecker
This is what you get:

Domino 9.0.1 FP2 adds spell checker functionality through the default CKEditor toolbar and through the 'IbmSpellChecker" toolbar button.

I have an update on this. SPR PHAN8R2GRE is created to look at including this functionality in a later release. In case you need to add a customer report to it.
All modern browsers come with spell checking capabilities which should activate for you on the field.

Related

Trying to disable remove on a per file-pond item basis

I'm investigating adding custom functionality via my own plugins, and here's what I've done so far
Premise
Create a plugin which will disable the remove button for relevant items
Attempted so far
Registered a plugin and during DID_LOAD_ITEM tried the below
const removeItemButtons = el.querySelectorAll('.filepond--action-remove-item');
removeItemButtons.forEach(removeItemButton => {
removeItemButton.setAttribute("disabled", "disabled");
});
But the button is not disabled. The attribute does not appear on the remove button. Am I missing something in the lifecycle on how plugins interact with the DOM? The button does get returned by the querySelector all, is it modified after the plugin is called?
did the removeItemButtons have been rendered before your function? it seems like your selector did not get the items

Problem configuring CKEDITOR in Magnolia RichTextField

I can't customize toolbar buttons in Magnolia's RichTextField
in Yaml file add configJsFile: /ckeditor/configJsFile.js pointing to config file under resource folder in java module project
- name: text
class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
configJsFile: /ckeditor/configJsFile.js
i18n: true
once configJsFile.js added RichTextField start showing up all imaginable buttons and it is too many
I tried to remove some buttons groups in configJsFile.js even comment out all content inside config funtion CKEDITOR.editorConfig = function( config ) { ... } that's make any effect.
Any idea how I can configure toolbar content in Magnolia's RichTextField?
Here is original configJsFile.js taken from Magnolia doc site
Which version of Magnolia are you using?
Worst case scenario you can change the default settings from
'ckeditor/config-default.js'
Hope that helps,
Cheers,
I was wrong assuming that magnolia pointed to java resources.
Once I put CKEditor config file into folder from magnolia properties I've got what I wanted
see magnolia.resources.dir=${magnolia.home}/modules

How can I disable the Preview button while in Source Mode with CKEditor 4?

We are using the latest version 4.7.3 of CKEditor (Full) available from nuget. We've tried a number of suggested solutions to disable the Preview toolbar button while in Source Mode, but could not get it to work. There are cases when there are more than one editor on a page, and they are added as user controls (.ascx) due to some unrelated logic. For example we've tried the below:
CKEDITOR.on('instanceReady', function (instance) {
instance.editor.addCommand('preview', {
modes: { wysiwyg: 1, source: 0 }
});
});
We configure the toolbar buttons via config.js.
CKEDITOR.editorConfig = function (config) {
config.toolbar_CMToolbar =
[
{ name: 'sourcedialog', items: ['Source', '-', 'Preview'] }
];
};
The reason we need this is to avoid a security issue when malicious script has been added while in Source Mode and the Preview was immediately requested, causing javascript to execute. Ordinarily the wysiwyg mode would clean this up and the malicious scripts would have been validated.
Below is the sample script that triggers the issue, for reference. (include everything from double-quote to tag close)
"><img src=x onerror=alert(7)>
Granted this is just evading the main issue rather than fixing it, but this workaround would be handled quicker.
Hoping to hear suggestions on how to correct this. Thanks!
You can change properties of commands like this:
CKEDITOR.on('instanceReady', function(evt) {
evt.editor.commands.preview.modes.source = 0;
});

how to configure ckeditor in Blog component in AEM

i need to have all ckeditor plugins in RTE of Blog component in AEM,
like http://ckeditor.com/
but the current Blog component in AEM have limited plugins. please check below link. am using AEM 6.2 version
http://localhost:4502/content/community-components/en/journal.html
is this possible ? if yes can some one guide how to do this.
Thanks in advance.
You need to overlay /libs/social/commons/components/richTextEditor component. Depending on the libraries you are using (jQuery, etc.) you will need to modify the document.ready to load the plugin using the following JS
CKEDITOR.plugins.addExternal( [plugin-name], '/etc/clientlibs/path-to-plugin', 'plugin.js' );
The plugin can then be registered with CKEDITOR as follows:
var ckEditor = CKEDITOR.replace( [editor-placeholder-element], {
toolbar: [{ name: '[toolbar-name]', items: [ '[plugin-name]' ] }],
extraPlugins: '[plugin-name]');
The [plugin-name] is the plugin identifier for your plugin based on
the library.
The library for plugin is normally stored under
/etc/clientlibs or your component.
You can chose an existing toolbar your plugin interface icon or you can create a new one.
The plugin and all it's dependencies must be initialised before the CKEDITOR is instantiated or alternatively your plugin must be able to work out its dependencies at runtime.
Hope this helps.

Dropdown menu does not trigger in oneui 3.0.2 (in Firefox)

I use an dropDownButton from the extlib, which does not work when I changed to OneUI 3.0.2 (from 2.1, in which it works fine).
Happens in firefox (31.8), not in (a very old) IE. Firebug shows the following error in its console, when I click on on of the dropdown entries:
TypeError: _9.getAttribute is not a function ,
and it point to ...{return _6[_9.getAttribute("widgetId")];}... in the lib -extlib.dijit.OneUIv302Dialog&-extlib.dijit.OneUIv302Menu&#Eya.js
Is it a (known) bug?
my code:
<xe:dropDownButton
id="dropDownButton1">
<xe:this.treeNodes>
<xe:basicContainerNode
label="IAM">
<xe:this.children>
<xe:basicLeafNode
submitValue="approve1" label="approve selected">
</xe:basicLeafNode>
<xe:basicLeafNode
submitValue="reject0" label="reject selected">
</xe:basicLeafNode>
</xe:this.children>
</xe:basicContainerNode>
</xe:this.treeNodes>
<xp:eventHandler
event="onItemClick" submit="true"
refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:submitIAMAction()}]]></xe:this.action>
</xp:eventHandler>
</xe:dropDownButton>
I have tested the Extension Library DropDownButton in conjunction with OneUI V3.0.2 without any troubles.
UPDATE "Output on server console":
I am working with the following environment:
Firefox 42
Domino Server 9.0.1FP4
Extension Library Version 9.0.1.v00_14_20150831-1301
It could be a problem with your Domino Server and/or Extension Library Version?
Try to do some updates on your environment.
It sounds like the same issue we had. In our case, I think the drop down entries could still work if you clicked on the actual text in the drop down option, clicking in the 'white space' would not work.
We found a solution thanks to Serdar Basegmez in the Defect list in ExtLib project on OpenNTF
http://extlib.openntf.org/main.nsf/project.xsp?r=project/XPages%20Extension%20Library/defects/0FFE08B1FC57FE6A86257D91004C156D
Give this a try:
put the following in a javascript library.
if(dojo.isMozilla) dojo.addOnLoad(function() {
dijit.registry.backupByNode=dijit.registry.byNode;
dijit.registry.byNode=function(node) {
if(node.getAttribute) {
return dijit.registry.backupByNode(node);
} else {
return dijit.registry.backupByNode(node.parentNode);
}
}
});
and then add your theme: (add add as a resource to a single page)
<resources>
<script src="/fixDropDownButton.js" clientSide="true"
type="text/javascript"></script>
</resources>

Resources