HTML Source in CKEditor too small - javascript

I am stucked with CKEditor. My HTML Source view is showing text in a small text area that with more than four lines show the text inside a scroll area like the image. What am i doing wrong?
Here is my loading CKEditor:
<div class="col-xs-12 col-sm-12">
<textarea name="editor1" id="editor1" th:field="*{content}"></textarea>
<script>
$(document).ready(function(){
CKEDITOR.replace( 'editor1' );
});
</script>
</div>
And here is my CKEditor configuration:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
];
config.removeButtons = 'Save,Print,NewPage,Templates,PasteFromWord,Replace,Find,SelectAll,Scayt,Form,TextField,Textarea,Select,Button,ImageButton,HiddenField,Radio,Checkbox,RemoveFormat,Indent,Outdent,CreateDiv,BidiLtr,BidiRtl,Unlink,Anchor,Flash,PageBreak,Iframe,BGColor,TextColor,Font,Preview';
};
AM i missing something?
Thanks in advance!
EDIT 1:
I have tried to change the configuration as said below, but still not working :(
To be more specific, the heigh of the editor is fine. The problem is the heigh of the HTML source, which shows an scroll :( New image added, 1 is the normal view and 2 the HTML source button view:
THANKS AGAIN!

It wasnt an CKEditor ISSUE. It was totally my bad. Sorry for the incovenience.
Noob error, i had in the main styles css a line like this
textarea {
height:100px
}
Thanks everybody for the help!

Ckeditor has different modes: Basic, standard and full modes;
You should change
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
to
{ name: 'standardstyles', groups: [ 'standardstyles', 'cleanup' ] },

Related

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

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

CKEditor custom toolbar WITH config.extraPlugins

I'm currently using CKEeditor 4 and I'm using a custom toolbar set in config.js, but I would also like to add the justify plugin. Justify plugin works with the standard editor, but when I specify the custom toolbar, I'm unable to include it.
The difference I can see is that the default toolbar uses toolbarGroups, in which case I added 'align' to the 'paragraph' group.
The custom toolbar uses name/items (I couldn't get it to work with groups), and I tried to use 'align', 'Align', 'justify', 'Justify', etc... nothing shows the justification buttons.
Here is the specific portion of the config.js
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' }
];
config.toolbar = 'ToolsNoImage';
config.toolbar_ToolsNoImage =
[
{ name: 'document', items : [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Table','HorizontalRule','SpecialChar','PageBreak'] },
{ name: 'tools', items : [ 'Maximize' ] },
{ name: 'tools', items : [ 'Source', '-', 'Preview' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','Align' ] },
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'tools', items : [ 'About' ] }
];
config.toolbarCanCollapse = true;
config.toolbarStartupExpanded = true;
config.extraPlugins = 'justify';
config.extraPlugins_ToolsNoImage = 'justify';
I feel like it's something very simple.. case issue, etc.
It is very simple, indeed :D You used wrong button names. The group is named 'align', but buttons 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' not 'Align' (you used this name in your configuration).
Also, this won't have any effect:
config.extraPlugins_ToolsNoImage = 'justify';
And this is rather not needed:
config.extraPlugins = 'justify';
But the most important thing is button names :)
BTW. There's a plugins/toolbar/samples/toolbar.html sample in every CKEditor package - it may help you finding the right names.
This is for anyone struggling to enable alignment/justify options like I did.
To enable, the following is required as hanji suggested:
config.extraPlugins: 'justify'
Simply use the following to customize ckeditor toolbar for align and justify..
config.toolbar = [
{name: "paragraph",
items: ["NumberedList", "BulletedList","Outdent","Indent","Blockquote","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]
}
];
for further customization in toolbar you can refer to this page and simply edit your config.js:
http://ckeditor.com/forums/CKEditor/Complete-list-of-toolbar-items

Categories