in default ckeditor toolbar i see two line Icon/button like this :
Now, i need to design ckeditor toolbar in one line Like This:
how do design ckeditor for this?(normal/responsive view)
In config.js you need edit this line :
config.toolbarGroups To config.toolbar And Remove {} / groups.
Like This:
// The toolbar groups arrangement, optimized for two toolbar rows.
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', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
Change to(NOTE: This is my Icons please edit this) :
config.toolbar =[
['Font','FontSize', 'Bold','Italic','Underline','Strike','-', 'Blockquote', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['BidiLtr','BidiRtl'],
['TextColor','BGColor'],
['customimage','customsmiley','Link',],
['Flash','customfiles','Table','-','Outdent','Indent'],
['NumberedList','BulletedList', 'HorizontalRule'],
['Styles','Format'],['-'], ['Paste','PasteText','PasteFromWord'],
['-','Source'],
['Maximize']
];
Your 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', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
Just remove slash '/', after { name: 'others' },
Related
How to configured image in CKeditor 3? This is code in config.js
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' },
{ name: 'about' }
];
};
but still cant show the image. This is UI the CKeditor
image
I'm using ckeditor, I'm reading from a database a template, which contains html code css and js
The problem is that when using:
CKEDITOR.replace ('description');
The css code of the template, is merged with the code of the web page, then the web page takes the styles I read from the template and break the styles.
What I should do, is that the ckeditor takes the css only he, and not the web page.
My configuration is:
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', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
config.removeButtons = 'Underline,Subscript,Superscript';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
};
can anybody help me?
Thanks
I want to customize the ckeditor. But it doesnot working i.e. always show the default view.
my html is
<div>
<textarea name="editor1" id="" cols="30" rows="10" class="editor"></textarea>
</div>
and js code is
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
<script>
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Subscript,Superscript,Source,Image,Table,HorizontalRule,SpecialChar,Anchor,Paste,PasteText,PasteFromWord,Styles,About,Format,RemoveFormat';
};
CKEDITOR.replace('editor1');
Where is my problem? thank you.
Have it this way instead.
CKEDITOR.replace( 'editor1', {
toolbarGroups: [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'about', groups: [ 'about' ] }
],
removeButtons: 'Subscript,Superscript,Source,Image,Table,HorizontalRule,SpecialChar,Anchor,Paste,PasteText,PasteFromWord,Styles,About,Format,RemoveFormat'
} )
Fiddle
I am using the following configuration:
config.toolbarGroups = [
{ name: 'document', groups: ['mode', 'document', 'doctools', 'maximize'] },
{ 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', 'justify' ] },
// { name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' }
// ,
//{ name: 'about' }
];
// The default plugins included in the basic setup define some buttons that
// we don't want too have in a basic editor. We remove them here.
// config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
config.removeButtons = 'Strike,Subscript,Superscript';
// Let's have it basic on dialogs as well.
config.removeDialogTabs = 'link:advanced';
config.extraPlugins = 'insertpre,format,justify,maximize';
Everything works okay but the maximize button always goes on the second row of the toolbar. Is there a way I can make it so maximize combines next to some other buttons such as the insertpre button?
You got to configure your toolbar item by item to control the exact position of each single button. By default, Maximize belongs to tools group so you can also put the whole group onto the top of the toolbar like this:
config.toolbarGroups = [
{ name: 'document', groups: [ 'tools', 'mode', 'document', 'doctools', 'maximize'] },
...
];
I'm trying to get stylesheetparser to work but am getting the error "editor.filter is undefined".
Here is my config.js file:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'colors' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'about' }
];
config.extraPlugins = 'stylesheetparser';
config.contentsCss = 'editor_new.css';
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = '';
};