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.
Related
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!
If I use: CKEDITOR.replace('editor1', { toolbar: 'Full' }); <br/>
I get my custom toolbar, but no text on the page
If I use: CKEDITOR.inline('editor1', { toolbar: 'Full' });<br/>
I get my text but not the full custom toolbar,
I don't get the Source button
Button definition...
> config.toolbar_Full = [
{ name: 'clipboard', items: ['Source','Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },<br/>
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll'] },<br/>
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },<br/>
{ name: 'links', items: ['Link', 'Unlink'] },<br/>
{ name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] },<br/>
{ name: 'styles', items: ['Font', 'FontSize'] },<br/>
{ name: 'colors', items: ['TextColor', 'BGColor'] }<br/>
];<br/>
I have also tried adding it like this: { name: 'document', items: ['Source'] }, rest of toolbar.
What am I missing?
I don't get the Source button
Because the Source button does not work with the inline editor. You can use the sourcedialog plugin instead (see samples here – http://sdk.ckeditor.com/samples/sourcearea.html).
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.