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/
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.
I am using ckeditor 4 but each time i write something and click source tool, it adds extra classes and html tags that i dont need. How do i remove this?
This are my screenshots
input version
source version
expected source
This is my config.js
CKEDITOR.editorConfig = function( config )
{
config.filebrowserBrowseUrl = "/ckeditor/attachment_files";
config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files";
config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files";
config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures";
config.filebrowserImageBrowseUrl = "/ckeditor/pictures";
config.filebrowserImageUploadUrl = "/ckeditor/pictures?";
config.filebrowserUploadUrl = "/ckeditor/attachment_files";
config.allowedContent = true;
config.removeDialogTabs = 'link:upload;image:Upload;image:advanced';
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'links', items: [ 'Link', 'Unlink'] },
{ name: 'insert', items: [ 'Image', 'Table' ] },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] },
{ name: 'others' },
'/',
{ 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', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'about' }
];
};
This is my ckeditor.rb
Ckeditor.setup do |config|
require 'ckeditor/orm/active_record'
config.cdn_url = "//cdn.ckeditor.com/4.7.1/standard/ckeditor.js"
config.js_config_url = 'ckeditor/config.js'
end
Not sure what i am doing wrong here but why is the formatting not working properly for source version.
Thanks
I want to use some of the optional extras, specifically video embedding, in CKEditor.
I have downloaded the entire thing to ckeditor in the public area, and in the plugins directory there is the video.
I start with the CDN of CKeditor:
<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
and then I add the option for the video plugin:
<script>
CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' );
</script>
(The video.js actually is in a subdirectory dialogs which I have tried as well).
I can see the CKEditor which appears on my page but no video button.
Anyone any ideas please?
First of all, you need to upload the contents of the plugin archive to any folder on your website. Although, it is a good idea to name the folder so that you knew it holds CKEditor plugins. Let’s name it as ckeditor/plugins for the sake of our example. You should end up with the following path then:
ckeditor/plugins/jsplus_image_editor
Now, we need to tell CKEditor to load the plugin from the above folder. Add the following code to your HTML code above the line where CKEditor replaces the standard control:
<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'yourpluginname',
'/ckeditor/plugins/yourpluginname', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>
Normally you install plugins trough the config.js but since you are using a cdn we need to replace the config. Update the above replace with the following code:
CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});
make the above mentioned custom_config.js and place the following code
CKEDITOR.editorConfig = function( config ) {
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.extraPlugins = 'PLUGINNAME';
config.toolbar = 'custom';
config.toolbar_custom = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
{ name: 'others', items: [ '-' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
{ name : 'new_group', items: ['PLUGINNAME'] }
];}
hope this helps!
I have followed the documentation and added two plugins:
enhanced image (image2)
enhanced color button
but neither appears in my toolbar. I have added all the dependencies.
Here's my config.js
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.height = 500; // 500 pixels.
/*config.removePlugins = 'colorbutton';*/
config.extraPlugins = 'button', 'toolbar', 'notification', 'clipboard', 'lineutils', 'dialogui', 'dialog', 'widgetselection', 'widget', 'image2', 'panel', 'floatpanel', 'panelbutton', 'enhancedcolorbutton';
config.removeButtons = 'NewPage,Source,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Outdent,Indent,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Flash,SpecialChar,PageBreak,Iframe,BGColor,Maximize,ShowBlocks';
};
Any assistance is much appreciated.
Please see:https://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraPlugins
The list of plugins should be entered as a single string of comma separated values:
config.extraPlugins = 'button,toolbar,notification,clipboard,lineutils,dialogui,dialog,widgetselection,widget,image2,panel,floatpanel,panelbutton,enhancedcolorbutton';
NOTE: plugins like button,toolbar,dialog and dialogui, should be available in any preset so unless you are having some very customized package, there should be no need to add them with extraPlugins setting. They should already be in the package.
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.