I am showing a ckeditor in my webpage using class="ckeditor" way. How can I configure my ckeditor to just show a basic toolbar. Here I found the sample page for showing a basic toolbar but not getting from documentation how to show that.
http://ckeditor.com/demo
check the Custom toolbar tab and see the first sample which has a very basic type of toolbar, how can I show it?
here is my code
<body>
<textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>
I want to show basic toolbar for all instances of ckeditor of my website.
If you use Basic it will show all Toolbar, So use this
CKEDITOR.config.toolbar = [
['Styles','Format','Font','FontSize'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
'/',
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;
If you put the two previous answers together, you will have the full solution. The first thing is to add the options in the 'config.js' file in your 'ckeditor' folder.
CKEDITOR.editorConfig = function( config ) {
config.skin = 'bootstrapck';
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ 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','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
};
Then add the call to the 'Basic' config in the HTML file.
<textarea id="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'ckeditor',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
That should be all you need, and obviously do not forget to call the 'ckeditor.js' file in your html file.
You need to set a specific configuration on launch.
<script type="text/javascript">
CKEDITOR.replace( 'description',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
description is refering to the id of the editor on your website.
Interesting links:
Configuration settings
Toolbar configuration
General CK Docs
UPDATED FOR 2018:
Those helpful tykes at CKEditor have only gone and created an online editor that you can customise to your hearts content! It's a nightly build so a static URL is of no use to you - navigate from http://nightly.ckeditor.com to the basic configurator option then select the TOOLBAR CONFIGURATOR button.
Copy and paste the generated content in to the ivoryckeditor bundle's config.js file (Web folder) and it should work without needs any of other file changes.
I built the following simple layout to show cut & paste operations and :
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ 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 = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};
I was also stuck in this issue but after so many trials i got solution of my problem:
use this in ckeditor.rb:-
Ckeditor.setup do |config|
require "ckeditor/orm/active_record"
config.cdn_url = "//cdn.ckeditor.com/4.12.1/full/ckeditor.js"
end
you can also change full to basic, standard or classic as per your requirement
best of luck
Related
I want to use some of the optional extras, specifically video embedding, in CKEditor.
I have downloaded the entire thing to ckeditor in the public area, and in the plugins directory there is the video.
I start with the CDN of CKeditor:
<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
and then I add the option for the video plugin:
<script>
CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' );
</script>
(The video.js actually is in a subdirectory dialogs which I have tried as well).
I can see the CKEditor which appears on my page but no video button.
Anyone any ideas please?
First of all, you need to upload the contents of the plugin archive to any folder on your website. Although, it is a good idea to name the folder so that you knew it holds CKEditor plugins. Let’s name it as ckeditor/plugins for the sake of our example. You should end up with the following path then:
ckeditor/plugins/jsplus_image_editor
Now, we need to tell CKEditor to load the plugin from the above folder. Add the following code to your HTML code above the line where CKEditor replaces the standard control:
<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'yourpluginname',
'/ckeditor/plugins/yourpluginname', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>
Normally you install plugins trough the config.js but since you are using a cdn we need to replace the config. Update the above replace with the following code:
CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});
make the above mentioned custom_config.js and place the following code
CKEDITOR.editorConfig = function( config ) {
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.extraPlugins = 'PLUGINNAME';
config.toolbar = 'custom';
config.toolbar_custom = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
{ name: 'others', items: [ '-' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
{ name : 'new_group', items: ['PLUGINNAME'] }
];}
hope this helps!
I have followed the documentation and added two plugins:
enhanced image (image2)
enhanced color button
but neither appears in my toolbar. I have added all the dependencies.
Here's my config.js
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ 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.height = 500; // 500 pixels.
/*config.removePlugins = 'colorbutton';*/
config.extraPlugins = 'button', 'toolbar', 'notification', 'clipboard', 'lineutils', 'dialogui', 'dialog', 'widgetselection', 'widget', 'image2', 'panel', 'floatpanel', 'panelbutton', 'enhancedcolorbutton';
config.removeButtons = 'NewPage,Source,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Outdent,Indent,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Flash,SpecialChar,PageBreak,Iframe,BGColor,Maximize,ShowBlocks';
};
Any assistance is much appreciated.
Please see:https://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraPlugins
The list of plugins should be entered as a single string of comma separated values:
config.extraPlugins = 'button,toolbar,notification,clipboard,lineutils,dialogui,dialog,widgetselection,widget,image2,panel,floatpanel,panelbutton,enhancedcolorbutton';
NOTE: plugins like button,toolbar,dialog and dialogui, should be available in any preset so unless you are having some very customized package, there should be no need to add them with extraPlugins setting. They should already be in the package.
Can someone help regards an issue I have with the CKEditor inline. I cannot get the toolbar to appear? Have a look at this fiddle:
https://jsfiddle.net/rr2m49zn/4/
Clicking on 'Edit me' should bring up the tool bar
HTML
<body><table><tbody><tr><td contenteditable="true">Edit me</td></tr></tbody></table></body>
JS
if ( typeof CKEDITOR == 'undefined' )
CKEDITOR.add
CKEDITOR.on( 'instanceCreated', function ( event ) {
var editor = event.editor,
element = editor.element;
// Customize editors for headers and tag list.
// These editors do not need features like smileys, templates, iframes etc.
// Customize the editor configuration on "configLoaded" event,
// which is fired after the configuration file loading and
// execution. This makes it possible to change the
// configuration before the editor initialization takes place.
editor.on( 'configLoaded', function () {
editor.config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ 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' ] }
];
editor.config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,Replace,Find,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Blockquote,BidiLtr,BidiRtl,Language,Anchor,Image,Flash,Table,HorizontalRule,Smiley,PageBreak,Iframe,Maximize,ShowBlocks,About,Placeholder';
} );
} );
}
What am I missing?
Copy and paste from MS Word to CKEditor works fine in all browsers on the PC. But in Firefox on a Mac, headings in bullets disappear and some other style issues are also ripped.
My config is like this:
CKEDITOR.editorConfig = function( config ) {
config.format_tags = 'h1;h2;h3;h4';
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles', groups : [ 'format', 'insert' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align'] },
{ name: 'links', groups: [ 'link' ] },
{ name: 'about' },
{ name: 'document', groups: [ 'mode' ] }
];
config.removeButtons = 'Undo,Redo,Image,Flash,Smiley,PageBreak,Iframe,SpecialChar,HorizontalRule,Cut,Copy,Anchor,Strike,Subscript,Superscript,Save,Newpage,Preview,Print,Templates,About,Help,Document,Language,Blockquote,Indent,Outdent,CreateDiv,NewPage,Styles,Font,FontSize';
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;
config.autoGrow_maxHeight = 600;
};
Any one encountered this issue also?
Please report this issue in our CKEditor bug tracker at http://dev.ckeditor.com. Thanks!
I get an issue when I try to add some HTML codes in my CKEditor textarea, my HTML is executed in the textarea. I mean, all my HTML codes have changed of place in my Textarea, so how can I fix it?
Before adding a post on my website, I put this in my textarea :
<pre><div>toto</div></pre>
The post in my database (everything is ok):
<pre><div>toto</div></pre>
When I try to edit the post, the content is reformated in my CKEditor textarea :
<pre> </pre><div>toto</div>
So I think the main issue is CKEditor, maybe he reformat or encode all my HTML code, I don't know what's going on...
EDIT 1:
Config file of CKEditor
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ 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' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'document', groups: [ 'mode'] }, // shows the source button
{ name: 'pbckcode' }
];
config.extraPlugins = 'pbckcode';
config.removeButtons = 'Underline,Subscript,Superscript';
};
My add post view:
extends admin_layout
block content
div.container
h1 Wellcome to administration pannel
div.space20
div.block.first
h2 Add post
div.wrap
form(action="/posts/add", method="post").admin
textarea(class="ckeditor", id="ckeditorFilter", placeholder="Content...", name="content", rows="15")
br
input(type="submit", value="Save")
script(src="/admin/js/ckeditor/ckeditor.js")
script
CKEDITOR.replace('content',{
toolbar: 'Basic',
uiColor: '#0091BD'
});
My edit post view :
extends admin_layout
block content
div.container
h1 Wellcome to administration pannel
div.space20
div.block.first
h2 Edit post
div.wrap
- each p in post
p= p.content
form(action="/posts/add", method="post").admin
textarea(class="ckeditor", id="ckeditorFilter", placeholder="Your content...", name="content", rows="15", required)!= p.content
br
input(type="submit", value="Edit")
script(src="/admin/js/ckeditor/ckeditor.js")
script
CKEDITOR.replace('content',{
toolbar: 'Basic',
uiColor: '#0091BD'
});
I've already answered your question here: Insert HTML codes in CKEditor textarea
You're encoding content incorrectly when writing it to the textarea.