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
I have CKeditor 4 working fine; but I needed to add the 'source' button so we can edit in HTML. This is not an inline version, it's in the CMS for editing page content.
I pasted the plugins into the plugins directory for Sourcedialog, Dialog, DialogUI and also Sourcearea.
My config.js now reads:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'savebtn';//savebtn is the plugin's name
config.saveSubmitURL = 'ajax-wysi-next.cfm';//link to serverside
script to handle the post
config.extraPlugins = 'sourcedialog';
config.extraPlugins = 'sourcearea';
config.extraPlugins = 'dialog';
config.extraPlugins = 'dialogui';
};
I am not seeing the Source button appear, even after clearing cache.
Do I need to do anything else?
Ok, so this got fixed like this:
Install the SourceDialog plugin and the plugins it depends on (Dialog, DialogUI).
Change config.js to have references to them:
config.extraPlugins = 'sourcedialog';
config.extraPlugins = 'dialog';
config.extraPlugins = 'dialogui';
Then, go to the page where you have the CKeditor installed and change it to read:
extraPlugins: 'savebtn, sourcedialog',
The important thing being that you put the plugins in this same field, separated by a comma, and NOT do an 'extraPlugins' line for each plugin.
Now both the Source button and my Save button are working fine.
Hope this helps others!
I want to be able to click on the image icon in CKEditor and be able to browser the local file system. I would like the chosen file to be passed to the editor just like the standard URL is. I want to use the base64image plugin to embed the image inline.
I have tried using CKFinder but, when I click the Browse Server button in the Image Properties dialog, I get an empty window with just 'run();' in the centre.
To enable CKFinder in read-only (gallery) mode, set the readOnly configuration option to true and pass it as a configruation option to the CKFinder.setupCKEditor function:
CKFinder.setupCKEditor( editor, {
readOnly: true
} );
This will disable the possibility to modify anything.
If you only want to disable uploads, you can disable modules related to upload operations:
CKFinder.setupCKEditor( editor, {
removeModules: 'FormUpload,Html5Upload,UploadFileButton'
} );
The second thing is to change Access Control settings in the server side connector by setting 'FILE_CREATE' to false so the uploads will be disabled also on the server side.
I'm using ImagePaste plugin to paste the image from word. But the image is not showing after the uploading.
When I paste the image it looks like this
But when I retrieve the image than it doesn't appear.
To automatically upload pasted image, you'll need:
A file manager (like CKFinder).
Upload Image plugin.
A properly configured CKEditor.
The configuration could look like this:
CKEDITOR.replace( 'editor2', {
extraPlugins: 'uploadimage,image2',
height: 300,
// Upload images to a CKFinder connector (note that the response type is set to JSON).
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
// Configure your file manager integration. This example uses CKFinder 3 for PHP.
filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
} );
There's an official guide about uploading files using 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.