CKEditor toolbar missing items such as styling - javascript

The toolbar for my editor is missing options. For example, I am not able to create headers.
Ive tried multiple different configurations in the JS file, though the editor seems to not change.
if (typeof(CKEDITOR) != 'undefined') {
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'document', items: [ 'Print' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'about', items: [ 'About' ] }
];
};
}
I'm trying to have a full toolbar as I am creating a website with blog articles and need all of the possible styling options.

It depends on your configuration, but I'm guessing you have some stale assets sitting around. You may need to run rake:assets:clobber. After that you can restart your development server, refresh the page, and the assets should re-compile.

Related

How to configure Ckeditor Toolbar in React JS?

I wanted to configure the Ckeditor toolbar in React, but I don't know where is the property details in the documentation.
Ckeditor React integration documentation didn't help because it doesn't contain much information.
I tried this :
import CKEditor from "ckeditor4-react"
<CKEditor
data={this.state.data}
onChange={this.onEditorChange}
config={{
toolbar: [
["Bold", "Italic", "Strike Through"],
[
"Cut",
"Copy",
"Paste",
"Pasteasplaintext",
"FormattingStyles",
"Undo",
"Redo"
],
["List", "Indent", "Blocks", "Align", "Bidi", "Paragraph"],
["Find", "Selection", "Spellchecker", "Editing"]
]
}}
/>
But some of these configurations didn't show up because I was guessing the property. I know there is toolbar configuration generator in documentation, but I don't know where to put this in React :
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 = 'Source,Save,Templates,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,RemoveFormat,CreateDiv,BidiLtr,BidiRtl,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,About';
};
I use it like this:
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
<CKEditor
data={input.value}
editor={ ClassicEditor }
config={{
toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
}}
/>
The full list of toolbar options is there:
*["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]*

CKEditor enter key press scrolls to the bottom of the page

I am working on a php project in which I am using a ckeditor. Everything else seems to work fine, other than when I press enter key I get scrolled to the bottom of the page. I tried the following code.
CKEDITOR.replace( fieldId,
{
height:heightVal,width:widthVal,
toolbar: [
{ name: 'document', items: [ 'Source' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Undo', 'Redo'] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'links', items: [ 'Link', 'Unlink'] },
{ name: 'insert', items: [ 'Image', 'Table', 'Flash', 'Video'] },
{ name: 'colors', items: [ 'TextColor' ] },
{ name: 'styles', items: [ 'Styles' ,'FontSize']},
{ name: 'about', items: [ 'About' ] }
],
enterMode : CKEDITOR.ENTER_DIV
}
);
This doesn't help. Can anyone please tell me how to solve this issue.
I've fixed such issue in my project by changing any CSS rule height: 100% to height: auto for parent elements of editing area. In my case it was <html>, so check whole hierarchy.
You set the enter mode to using a div.
You could have some kind of style on divs height?
Can you test it by switching to
enterMode : CKEDITOR.ENTER_P
Does this change the behaviour?
UPDATE : i found this: fixed bug
Maybe updating ckeditor could fix the problem.

How to prevent CKEditor from converting width,height attributes of img to inline style?

Sorry if it seems an old problem, But right now, it is more than 3 hours that I am stucked in this problem and can not solve it, So please tell me how I can solve this.
I have recently added a CKEditor to a webpage. The problem is that it converts width and height attributes of the img elements to inline style. These attributes are set in server-side and I wish I keep them. I tried many possible solution, but they seems to be old.
Here is the script I used:
<script language="JavaScript" type="text/javascript">
CKEDITOR.config.toolbar = [
{ name: 'document', items : [ 'Source','-','Save','DocProps','Preview' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar', ] },
{ name: 'styles', items: ['Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor' ] },
{ name: 'tools', items: ['Maximize', 'About' ] }
];
CKEDITOR.config.height = 500;
CKEDITOR.config.contentsLangDirection = 'rtl';
CKEDITOR.replace( 'htmlp1', {
allowedContent:
'img(left,right)[!src,alt,width,height];'
} );
</script>
Please, would you clearly tell me what should I do?
Thank you very much.

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

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