All,
From CKEditor's developer guide(http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar), you can see there are two ways to define a toolbar:
method 1: config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
....
];
method 2: config.toolbar_Full =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']....
];
What's the difference between them? is the method 2 used in earlier version so that they have to support for backward compatibility?
another question:
config.toolbar properties, from the doc, it can be a string like config.toolbar="Full" or an array like:
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic' ]
];
Don't you think it's kind of confusion?
As per my knowledge
Method 1: has naming of the group while the second method contains only the itmes used in method 1.
Config.toolbar can be either a name of the settings or the array of the group settings.
Related
Can anyone give the CKEditor configuration for just Bold & Italic, and nothing else?
I don't want to keep removing buttons one by one, is that the only way?
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor';
I want to specify what I do want (Bold & Italic) instead of what I don't.
Use the toolbar configuration option:
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
]
I want my editors to be able to use keyboard shortcuts for applying headings.
I've been experimenting with the "keystrokes" approach on the ckeditor site. It works for some things, but not the headings. For instance, the following applies an additional mapping for 'bold' using Ctrl + Shift + u:
config.keystrokes = [
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'bold' ],
];
Why can't I enable the headings?
Right now this is what my config.js looks like:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
{ name: 'forms' },
{ name: 'tools' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Styles,Strike,Image,Outdent,Indent,Blockquote,Cut,Copy,Paste,PasteFromWord,Undo,Redo';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;h4';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
// Whether to escape basic HTML entities in the document, including:
// (nbsp,gt,lt,amp)
config.basicEntities = false;
config.entities_additional = 'lt,gt,amp,quot'
config.entities_latin = false;
config.entities_greek = false;
config.disableNativeSpellChecker = false;
config.removePlugins = 'wsc,scayt';
config.scayt_autoStartup = false;
config.height = 1000;
config.keystrokes =
[
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'bold' ],
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 73 /*I*/, 'h1' ],
];
};
I'm hoping to keep my changes restricted to the ckeditor directory (ideally only inside config.js).
You have to create a new command in your HTML page for each of the headings you want to apply. For <h1>:
var editor1 = CKEDITOR.replace( 'editor1' );
editor1.on( 'instanceReady', function( evt ) {
evt.editor.addCommand( 'h1' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h1' } )) );
// other commands for 'h2', 'h3' etc
evt.editor.setKeystroke( CKEDITOR.CTRL + CKEDITOR.SHIFT + 85 /*U*/, 'h1');
// other keystrokes for 'h2', 'h3', etc
});
There is surprisingly little documentation around the intricacies of ckeditor's keystrokes so I'm going to share some code that demonstrates two approaches to adding keyboard shortcuts.
The first approach can be done for some elements simply by editing the config.js file. The second uses a custom plugin.
ckeditor/config.js
CKEDITOR.editorConfig = function( config ) {
[ ... ]
/* This is the easy way to add keystrokes, but it only works for
* default commands like bold, italic, link (shown here), etc.
* This is the approach recommended in the ckeditor docs.
*
* #see: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.keystrokes
*/
config.keystrokes = [ [ CKEDITOR.CTRL + 75 /*K*/, 'link' ] ];
/* It's hard to get keyboard shortcuts for elements that don't have
* default ckeditor commands - headings included. I created
* a simple plugin that lets me define additional shortcuts. The
* plugin needs to be declared as follows:
*/
config.extraPlugins = 'customkeyboardshortcuts';
};
This is an extraordinarily simple plugin, so all it requires is:
being added to config.js as in the example above
a directory name that matches the plugin name (eg "customkeyboardshortcuts")
a js file named plugin.js with the following contents
ckeditor/plugins/customkeyboardshortcuts/plugin.js
CKEDITOR.plugins.add( 'customkeyboardshortcuts', {
// The plugin initialization logic goes inside this method.
init: function( editor ) {
/* The heading formats do not have ckeditor commands associated with them
* by default in ckeditor. We use a plugin to give them command names
* in order to set the keystrokes below.
*
* (If the headings had command names by default then we wouldn't need a plugin
* at all and could just take the "keystrokes" approach in config.js - see
* http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.keystrokes)
*/
editor.addCommand( 'h1' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h1' } )) );
editor.addCommand( 'h2' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h2' } )) );
editor.addCommand( 'h3' , new CKEDITOR.styleCommand( new CKEDITOR.style({ element: 'h3' } )) );
/* Then we need to add a keystroke for the headings
*
* The hard part is finding a viable keyboard combination. In my
* tests I wasn't able to use any combination that included a number
* (regardless of which modifier keys I choose). The letters 'H' (for
* "heading") and 'F' (for "format") are reserved for OSX 'hide' and chrome
* 'find' respectively. Also the function keys don't work on a mac, and the
* 'fn' modifier key doesn't exist on a windows machine.
*
* I picked 'B' because h1 is _like_ bold, and gave h2 and h3 to 'V' and
* 'C' respectively because it feels like a fairly natural progression to
* me (even though it's kind of backwards).
*/
editor.setKeystroke( CKEDITOR.SHIFT + CKEDITOR.CTRL + 66 /* B */, 'h1');
editor.setKeystroke( CKEDITOR.SHIFT + CKEDITOR.CTRL + 86 /* V */, 'h2');
editor.setKeystroke( CKEDITOR.SHIFT + CKEDITOR.CTRL + 67 /* C */, 'h3');
}
});
And thanks to #Wizard for getting me onto the right track. As he mentioned in his post, you can add JS to the page that ckeditor is located on also. I didn't want to muck up our view files with ckeditor js inserts, so that didn't work for me, but it might work for you.
I'm using aldeed:collection2 and aldeed:simple-schema packages. I want to validate a doc against the schema. My schema contains e.g. a string field with allowedValues array and an array of nested object, described with sub-schema. Like this:
...
type: {
type: String,
allowedValues: [ 'A', 'B', 'C' ],
defaultValue: 'A',
index: 1,
},
nestedStuff: {
type: [ new SimpleSchema(nestedStuffSchema.schema(Meteor, SimpleSchema)) ],
defaultValue: [],
},
...
I have a 'bad' doc which has e.g. "D" in type field and invalid nested array items.
At client I'm trying to:
Contacts.simpleSchema().namedContext().validate(badDoc);
and it returns true. SimpleSchema says the doc is valid even though its fields do not abide to schema.
Validating 'bad' type field individually also returns true.
What am I doing wrong? Why could SimpleSchema assume random stuff to be valid?
if you want to validate an array of strings you need to keep String inside [ ].See the below code it may help
type: {
type: [String],
allowedValues: [ 'A', 'B', 'C' ],
defaultValue: ['A'],
index: 1,
},
nestedStuff: {
type: [ new SimpleSchema(nestedStuffSchema.schema(Meteor,SimpleSchema)) ],
defaultValue: [],
},
Thanks
I'm having difficulty deactivating the Advanced Content Filter (config.allowedContent = true; dosen't seem to work). I've tried everything that I've read on the forums, including clearing the cache, and making it an external file.
CKEditor 4.2.2 - allowedContent = true is not working
I've even added config.protectedSource.push lines, and they work to a point. The CKEditor still adds div tags and partially deletes other tags.
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all. Here is what I have in the config.js. If anyone can see something I did wrong, or knows of a way to make it work, please help this somewhat stressed web guy.
Thanks,
Rusty
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'about' }
];
// Define changes to default configuration here. For example:
// config.uiColor = '#AADC6E';
// misc options
config.allowedContent = true; // allowedContent doesn't work :-(
// Protected Source
config.protectedSource.push(/<section>[\s\S]*?<\/section>/gi); // allow <section></section>
config.protectedSource.push(/<span>[\s\S]*?<\/span>/gi); // allow <span></span>
config.protectedSource.push( /<link[\s\S]*?\>/g ); // allow <link> tag
config.protectedSource.push( /<!--[\s\S]*?\>/g ); // allow <comment> tag
config.protectedSource.push( /<br[\s\S]*?\/>/g ); // allow BR Tags
config.protectedSource.push(/<script>[\s\S]*?<\/script>/gi); // allow <script></script>
config.protectedSource.push(/<div>[\s\S]*?<\/div>/gi); // allow <div></div>
config.removeButtons = 'Anchor,Iframe';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6'; // format button options
config.height = '500px'; // edit window height
config.skin = 'moono';
config.stylesSet = 'vam_styles:/templates/admin/-css/vam_styles.js'; // style button options
// Only add rules for p and span elements.
config.stylesheetParser_validSelectors = /\^(p|span\div)\.\w+/;
config.stylesheetParser_skipSelectors
};
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all.
This is not possible. CKEditor is not a web site builder into which you can load any possible HTML. It is a rich text editor. So you should use it to edit the textual part of the website, not the whole layout.
For instance, if you had a layout with two columns and some header above them, it would be best if there were 3 editors - one for each column and one for the header. Of course, in this basic case CKEditor could be used to edit or 3 sections at once, but the more complex the layout the more important it is to use CKEditor correctly.
PS. It's CKEditor, not ckEditor.
Thanks for your reply.
I wasn't talking about site design templates, but page design templates. On the Full featured version of CKEditor there is a template button that we've been able to enhance. We now are able to let our clients choose several well designed page layouts that are responsive for different devises. It is very effective.
After trying everything I found the culprit that was causing the problem. I was using <br> instead of <br />. As soon as I switched the editor left my code alone.
Best Wishes!
Rusty
I have a config.toolbarGroups setting in config.js but I don't know what name to use for the groups to add font family/font size controls. (It seems the documentation is lacking in this regard). I've found some suggestion that I should use CKBuilder to create a package that already includes it, but I can't redeploy the entire ckeditor just to add a couple of buttons.
Edit: My CKEditor is version 4
Any advise?
Thanks!
config.extraPlugins = 'font';
You have to add the plugin...
There are two (mutually exclusive) ways to configure the toolbar. Check out the following:
http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html
I tried to use config.toolbarGroups first, but ended up using config.toolbar instead. Here's what I ended up using:
config.toolbar = [
{ name: 'save', items: [ 'savebtn','Undo','Redo' ] },
{ name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord'] },
{ name: 'document', items: [ 'Find','Replace'] },
'/',
{ name: 'lists', items: [ 'NumberedList','BulletedList','Outdent','Indent'] },
{ name: 'insert', items: [ 'Image','Table','Smiley','SpecialChar'] },
{ name: 'link', items: ['Link','Unlink'] },
'/',
{ name: 'basicstyles', items: [ 'Font','FontSize','Bold','Italic','Underline','Strike','Subscript','Superscript'] },
//'/',
{ name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }
];
Note that I am using a save plugin that was generously contributed by kasper Taeymans, which can be found at the following location:
How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
I also found the following document to be really useful, even though it related to version 3:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
I used the information in this article to produce my configuration (I'm using version 4.2.1), specifically the names of the items (e.g. Cut, Copy, Paste), as this was the missing link in my case.
Took me a long time to figure out that I explicitly had to add FontSize to the toolbar, too - doesn't seem to work with Font only.
This can be used to add font family and font size in the CkEditor.
This is to be done in config.js.
Also see docs
config.font_names = 'Arial;Times New Roman;Verdana;' + CKEDITOR.config.font_names;
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote','CreateDiv','-',
'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }
];
config.toolbar = 'Full';
Add directly using script :
CKEDITOR.replace('content', {
extraPlugins: 'uicolor,colorbutton,colordialog,font',
});
To change default styles of text :
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 25px; color: #FFFFFF;background-color: #006991;}");