Related
I'm using CKEditor 4 react in my Next.js project. I have a problem in my dropdown toolbars when editor switched on full screen mod. My problem is as follows :
on clicking on the font-size drop down in toolbar the options appear and I can select a size (It works correctly as expected)
I click on "Maximize" button in toolbar and the screen size change
Now I repeat step1 again but options of font-size drop down doesn't appear (Not expected behavior)
<CKEditor
data={this.state.static_page.content}
onChange={this.onEditorChange}
config = {{
allowedContent : true ,
embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
extraPlugins :`justify,font,colorbutton,smiley,pagebreak,iframe,find,save,exportpdf,preview,print,selectall,forms,copyformatting,showblocks,uploadfile,uploadimage,autoembed,embed`,
filebrowserBrowseUrl: photo_url,
filebrowserUploadUrl: photo_url,
toolbar : [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-'
// , 'Scayt'
] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton'
// , 'HiddenField'
] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike',
// 'Subscript',
// 'Superscript',
'-', 'CopyFormatting', 'RemoveFormat'
] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',
// 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',
// 'BidiLtr', 'BidiRtl',
// 'Language'
] },
{ name: 'links', items: [ 'Link','Unlink', 'Anchor'
// ,'autolink'
] },
{ name: 'insert', items: [ 'Image','Embed','Auto-embed', 'Iframe', 'Table', 'HorizontalRule', 'Smiley','SpecialChar', 'PageBreak' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
],
language: "fa",
uiColor :'#b9a168',
// extraAllowedContent : 'button(*)[*]' ,
extraAllowedContent :true,
copyFormatting_allowRules :true,
copyFormatting_allowedContexts:true,
contentsLanguage :'fa',
contentsLangDirection : 'rtl',
// justifyClasses :['AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ],
pasteFilter:'semantic-content',
removeEmpty : false,
}}
// onPaste ={this.onEditorPaste}
// onBeforeLoad={console.log("onBeforeLoad")}
/>
I test this on a react project and it worked correctly, but in next project it doesn't work correctly so I think this problem related to my framework.
Let start with I am no expert working with CKEditor but I think I have done this right and it should work but there certainly could be something I am doing wrong. Two days trying to figure it out and I think I have tweaked everything more than once and just cannot get it all to work.
I am loading https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js and loading an external plugin that I wrote. My plugin is loading great and my icon showed up in the toolbar and context menu at appropriate times and clicking on them made the right things happen. I defined a custom toolbar and I got that just the way I wanted it; defined in a local config file pointed to by customConfig:… in the CKEDITOR.replace() setup call. All was right with the world!
Then I tried to do them both at the same time – but my toolbar icon/button does not get added to my custom toolbar setup. My plugin is still loading and working and I can get my plugin through the context menu and it does what it is supposed to do so I think it is there and still working; but I cannot get the button/icon to show up in the toolbar. I have also tried setting the toolbar in the config file as an array of arrays and as an array of objects with group names – my button does not show up. I have tried defining the toolbar in the CKEDITOR.replace() object as both an array of arrays and as an array of objects and the custom toolbars show up but my toolbar button does not show up. I have tried defining my button in the custom toolbar that I created and by using the editor.ui.addButton method. No button in my custom toolbar!
If I comment out the customConfig: line then my button shows up in the document group of the default toolbar, so I think that I am adding it correctly at the right time with the right API and pointing at the right png file. However, if I uncomment the customConfig and make no other changes and hit Ctrl+F5 multiple times to flush the cache then the button does not show up no matter where I try to put it (document, insert, button group I add via API, etc).
I am fairly sure that my custom config is getting processed and used because it does change the toolbar from the standard built-in one to what I have defined.
Using the default toolbar setup I can add a toolbarButtonGroup and put my button in that but that does not work either when I try to use a custom toolbar setup (I think that I read this was not allowed except for the built in toolbar in the docs).
So my questions are
Is it possible to have a custom toolbar definition AND an external plugin AND have a custom toolbar button all while using the CDN version of CKEditor?
Will I have to build and host my own version of CKEditor so that my plugin is not an external plugin?
Is there something else I am doing wrong?
Here is the custom toolbar setup I created (this is not the end game but one that I created to prove to myself I could create a custom toolbar):
config.toolbar = [
{ name: 'document', items: [ 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ 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', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about', items: [ 'About' ] }
];
Here is the custom toolbar setup I created with my icon/button in it (it is the xrr first item in the document group:
config.toolbar = [
{ name: 'document', items: [ ‘xrr’, 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ 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', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about', items: [ 'About' ] }
];
Here is how I add the button to the toolbar – this works for the built in toolbar but not with the custom definition above:
editor.ui.addButton( 'xrr', { label: 'Create RR Placeholder', // lang.toolbar,
command: 'xrr',
toolbar: 'document',
icon: 'xrr'
}
);
Thanks so much for any help anyone can provide!
I am using CKEditor and have defined a custom toolbar in the config.js file.
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'MyToolbar';
config.uiColor = '#f6f6f6';
config.toolbar_MyToolbar =
[
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'colors', items: ['TextColor'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
{ name: 'styles', items: ['Font', 'FontSize'] },
];};
however I need to do another custom toolbar to use it at the same page with different options.
I tried to use the code below to configure the 2nd toolbar and it worked, but it stopped all the other editable elements that follows.
CKEDITOR.inline("editor1", {
extraPlugins: 'sourcedialog',
toolbar: [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'colors', items: ['TextColor'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
{ name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'], items: ['NumberedList', 'BulletedList'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'insert', items: ['Image'] },
'/',{ name: 'styles', items: ['Font', 'FontSize', 'Sourcedialog'] }]});
I know there is a way to solve this, because here in the official website they have multiple of custom toolbars and all working fine
http://sdk.ckeditor.com/samples/inline.html
Thanks for your time and help.
Does someone have a proper guide to configure styles in CKEditor please? My objective is to customise the dropdown list (I only really need one dropdown) to provide multiple styles of the same HTML tag. For example a P tag could have the following styles: <p>, <p class="excerpt">, <p class="highlight"> that can be selected from the dropdown list.
I tried to read this documentation but it has a lot of missing information. It uses a lot of CKEditor jargon and doesn't give an overview of the architecture or execution/initialisation pipeline to begin with.
I am using a very simple CKEditor (below) and I cannot find the difference between the "Paragraph" and "Normal" dropdown.
The documentation says use this code to configure toolbar:
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' }
];
I see "styles" in one of the code lines, but it does not explain what "name" is, and what { name: styles' } does. Removing it will remove both the dropdowns and there is no hint in how to customize the dropdown list.
Then I found
config.format_tags = 'p;h1;h2;h3;pre';
but this only allows me to remove the dropdown item, not the combobox itself.
There is also the CKEDITOR.styleSet.add
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
Again, it does not explain where to place this code, or the execution sequence in the initialization pipeline. It does not explain how the value 'my_style' is used, whether it is a reference to some other configuration. I also don't quite understand the purpose of the comments "block level styles" and "inline styles". Seems irrelevant? The configuration code does not seem to make a distinct between these 2.
CKEDITOR.replace( 'ckeditor', {
height: 500,
contentsCss: '.helloworld { background-color:#C0C0C0;}.helloworld2 { background-color:#5555C0;}',
docType: '<!DOCTYPE HTML>',
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
],
stylesSet: [
{ name: 'Paragraph', element: 'p', attributes: { 'class': 'helloworld' } },
{ name: 'Paragraph2', element: 'p', attributes: { 'class': 'helloworld2' } },
]
} );
http://jsfiddle.net/zf9w6tmm/5/
I am using CKEditor in my application, which I am developing using Outsystems. I need to change the current view provided by the CKEditor. (It has GUI options to save the data, make it italic, bold etc). I need to remove these options or either disable them.
Any hints ?
Thanks !
There's pretty good advice in the developers guide, but this is what I use:
In your config.js
config.toolbar = 'Mine';
config.toolbar_Mine =
[
{ name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', '-', 'Templates'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
},
{ name: 'links', items: ['Link', 'Unlink', 'Doxtest'] },
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'] },
'/',
{ name: 'styles', items: ['Styles', 'Format', 'FontSize'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'tools', items: ['Maximize', 'ShowBlocks'] },
{ name: 'ponify', items: ['InsertMagicalPony'] }
];
Then just add/remove whatever you need. Note the { name: 'ponify', items: ['InsertMagicalPony'] },which you for example would probably not have.