We Keep Coding

Ckeditor broken page css web

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

CKEDITOR custom config issue

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

Show ckeditor toolbar in inline icons and buttons

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' },

How can I add a new button into a group with CKEditor

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'] },
...
];

Getting CKEditor plugin stylesheetparser to work - editor.filter is undefined

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 = '';
};