How to configure Ckeditor Toolbar in React JS? - javascript

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"]*

Related

CKEditor image plugin configuration for CKeditor 3 not available

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

CKEditor toolbar missing items such as styling

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.

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

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

Categories