Related
Spell Check is not working in my CKEditor. I tried disableNativeSpellChecker = false but in vain. Here is my config.js. My CKEditor version is 4.5.6 Any idea ?
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.disableNativeSpellChecker = true;
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection'] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Use line below for line break in toolbar
// '/',
// Html encode ouput
config.htmlEncodeOutput = true;
config.removePlugins = 'elementspath,maximize,scayt';
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Strike,Subscript,Superscript,Source,About,Styles,Blockquote,Link,Unlink,Anchor,Image,Table,HorizontalRule,SpecialChar';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};
Integrated the Browser Spell check by adding the following code to config.js
config.disableNativeSpellChecker = false;
config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';
Hold down the SHIFT key then click the right mouse button on the text.
At this point the usual context menu with options will be displayed.
On Linux you can use either the SHIFT or the CONTROL keys.
On Mac you can use either the SHIFT or the COMMAND keys.
Here are screenshots WITH and WITHOUT modifier key.
I added the files provided in the zip download for the Simple Plugin (Part 1) example to a web site with a working CKEDITOR setup. I made no changes to any of the files. A plugin called abbr is supposed to be defined by this code. After reloading the page containing CKEDITOR, I did not see the icon for the plugin appear after I added the plugin to extraPlugins. I then added a reference to the plugin in the insert toolbar but that also did not work.
I can get the plugin dialog to appear by binding to a keystroke, so at least that much works:
config.keystrokes = [
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 32 /*space*/, 'abbr' ]
];
Here is my ckeditor.js, after removing the Play Framework view markup (hopefully I did not miss any):
<script>
function createEditor() {
var editor = CKEDITOR.instances.BLAH;
if (editor) {
try { editor.destroy(true) ; } catch ( e ) { }
}
editor = CKEDITOR.replace("BLAH", {
height: $(window).height() / 2 - 30,
"extraPlugins": "imagebrowser,abbr,codemirror",
on: {
instanceReady: function(evt) {
var maximized = $.cookie("maximized");
var me = maximized=="true";
if (me)
editor.execCommand('maximize');
},
save: function(evt) {
var scaytEnabled = CKEDITOR.plugins.scayt.state[evt.editor.name];
$.cookie("scayt_enabled", scaytEnabled.toString(), { path: '/' });
var maximized = evt.editor.commands.maximize.state==1;
$.cookie("maximized", maximized.toString(), { path: '/' });
}
}
});
}
</script>
Here is the JavaScript that launches CKEDITOR. abbr is the last plugin mentioned in insert toolbar:
CKEDITOR.editorConfig = function(config) {
config.allowedContent = true;
config.tabSpaces = 2;
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
config.toolbarCanCollapse = true;
config.toolbar = [
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] },
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps',/*'Preview',*/'Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
//{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe', 'abbr' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
'/',
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'/*,'-','BidiLtr','BidiRtl'*/ ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker','Scayt' ] }
];
};
I noticed that the instructions had a difference from the code; this code was shown in the instructions:
editor.ui.addButton( 'Abbr', {
label: 'Insert Abbreviation',
command: 'abbrDialog',
toolbar: 'insert'
});
But the code in the download has a different value for command: abbr. Neither value worked. I tried adding abbrDialog to the insert section of config.toolbar but that did not work either. Perhaps there is still another problem.
There's a small bug in this tutorial - in the code you can download the command is named abbr when in the code samples it is abbrDialog.
But name of the button is all the time the same - Abbr (it's case sensitive!). So basically, your config.toolbar setting is incorrect, because you used lower cased name.
I 'd like to ask this small but very important question i got: (I Downloaded CKeditor 4.3.2, and believe me i've been looking for this over the internet for ssooooooo long without any success.)
I've tried to show the 'Smiley' icon in my toolbar, but it doesn't show it, and that happens with some others like 'Save', 'Print', 'NewPage' for instance and i don't know why. Also when i insert a link of a video isn't show either in order people watch it once is posted... Everything works just fine with the others but not with these i just mentioned! Please! thanks for reply!
PS: I've found in some forums that icons in these version 4.3.2 have change theirs names, u think that is the reason?
here is my code:
CKEDITOR.editorConfig = function( config )
{
uiColor: '#14B8C4',
config.toolbar = 'Full';
`config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-', 'Save','NewPage','DocProps','Preview','Print','-','Templates', 'Emoticons' ] },//solo Source
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo', 'clipboard' ] },//BIen
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt', 'TextColor' ] },//Solo SpellChecker
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', //nada
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },//Todas
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },//Todas hasta Bloquiote
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] }, //Todas
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule',"Smiley",'SpecialChar','PageBreak','Iframe' ] }, //Falta flash, smiley, ifame
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }, //ninguno
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-' ] }
];
//ToolBar groups configuration
config.toolbarGroups = [
{ name: 'document', groups: ['mode', 'document', 'doctools']},
{ name: 'clipboard', groups: ['clipboard', 'undo']},
{ name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{ name: 'forms'},
'/',
{ name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{ name: 'links'},
{ name: 'insert'},
'/',
{ name: 'styles'},
{ name: 'colors'},
{ name: 'tools'},
{ name: 'others'},
];
};
`
Finally I got the solution which was very simple. But, before I tell you the solution I'll tell you the reason:
CKEditor has been updated. So, some plugins' names have been changed, you're not going to find them with the same name as you used to.
Solution is: go to Download CKEditor with plugins selected by you, and there you're going to find three different packages to download and below there's another one: "Or let me customize my CKEditor" click on it and "download & customize editor".
After that you'll be redirected to another page on which you'll see two columns, the left one shows you all the plugins that come with the package by default (you can also eliminate some plugins if you don't want them) and the right column shows you some plugins that can be added to the package().
Hope you find this solution helpful.
Do you have the plugins installed to support those missing buttons?
I was seeing that in the CKeditor we've been using for a while now, all of the sudden, it lost some of it's toolbar buttons.
They were configured to be there, yet did not display. Buttons like TextColor, the Justifieds, etc..
What our problem turned out to be was that we were missing the plugins for these buttons. We must have switched from a compilation that included some plugins to the base code or something.
The CKEditor docs mention item by item toolbar configuration here, but where is a list of the names of the buttons in the different groups?
There is a similar question here, but the answer is for a previous version of CKEditor. Some of the button names do not work.
You can check the toolbar sample in your CKEditor package.
There, you've got listed all buttons and all toolbar groups (since CKEditor 4 there are two ways of setting toolbar layout) that are enabled in your CKEditor build.
If you don't see a button that you remembered from CKEditor 3, check if it's available in your CKEditor package version (there are now 3 - basic, std and full). Some plugins are not included in any of these builds and you have to create your own.
PS. If you're using standard or basic build check config.js file - some buttons like Underline are removed in these presets by setting config.removeButtons.
Here is a nice list of button names:
Complete List of Toolbar Items for CKEditor
items
"Source"
"Save"
"NewPage"
"DocProps"
"Preview"
"Print"
"Templates"
"document"
items
"Cut"
"Copy"
"Paste"
"PasteText"
"PasteFromWord"
"Undo"
"Redo"
items
"Find"
"Replace"
"SelectAll"
"Scayt"
items
"Form"
"Checkbox"
"Radio"
"TextField"
"Textarea"
"Select"
"Button"
"ImageButton"
"HiddenField"
items
"Bold"
"Italic"
"Underline"
"Strike"
"Subscript"
"Superscript"
"RemoveFormat"
items
"NumberedList"
"BulletedList"
"Outdent"
"Indent"
"Blockquote"
"CreateDiv"
"JustifyLeft"
"JustifyCenter"
"JustifyRight"
"JustifyBlock"
"BidiLtr"
"BidiRtl"
items
"Link"
"Unlink"
"Anchor"
items
"CreatePlaceholder"
"Image"
"Flash"
"Table"
"HorizontalRule"
"Smiley"
"SpecialChar"
"PageBreak"
"Iframe"
"InsertPre"
items
"Styles"
"Format"
"Font"
"FontSize"
items
"TextColor"
"BGColor"
items
"UIColor"
"Maximize"
"ShowBlocks"
items
"button1"
"button2"
"button3"
"oembed"
"MediaEmbed"
items
"About"
Simply generate your own configaration in visual CKEditor Toolbar Configurator
Generated an example:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,BidiLtr,BidiRtl,Language,Styles,Font,Smiley,CreateDiv,Checkbox,Scayt,NewPage,About';
};
Underline option is available, but by default it's not visible. You need to remove it from below line in config.js file.
config.removeButtons = 'Underline,Subscript,Superscript';
I have integrated ckeditor with ckfinder. I want to remove the upload button from tool bar. When u click images/links from ckeditor, a file browser opens and then click "browse server" button. It opens another browser when you can browse the folders. On the top there is a tool bar section where we can find "Settings, Help and upload" buttons. I have to remove that upload button. i am using javascript. Please help
For removing ckfinder upload button then you need to add some code in ckfinder config.js
CKFinder.config.toolbar_Full = [['Refresh', 'Settings', 'Maximize']];
hope it is works
Set on main config.js (ckfinder 3 root folder):
config.removeModules = 'UploadFileButton';
Use this way of customizing toolbars
editor_edit = CKEDITOR.replace( 'e_notification', {
uiColor: '#888888',
height: '250px',
filebrowserBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
filebrowserWindowHeight : '700',
toolbar :
[
{ name: 'document', items : [ 'Source','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
]
});