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.
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 have upgraded from ckeditor version 4.6.2 full package to 4.10 full package and the color buttons are not appearing.
Here is my toolbar config:
config.toolbar = [
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt'] },
{ name: 'tools', items: ['ShowBlocks'] },
{ name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
{ name: 'insert', items: ['Image', 'Table', 'SpecialChar', 'Iframe'] },
{ name: 'document', items: ['Source'] },
'/',
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'styles', items: ['Format', 'Font', 'FontSize'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', ] },
];
I am not getting any errors, is there a work around for this? This is a critical plugin for our platform.
After I add the wordcount plugin it just reverts back to my orignal text area.
Here is the code I have (js is not my thing by any means):
<textarea id="editor1" name="editor1" maxlength="10" placeholder="5000 Characters Max.(with HTML)"></textarea>
<script>
CKEDITOR.plugins.addExternal( 'wordcount', '/ckeditor/plugins/wordcount/');
config.wordcount = {
// Whether or not you want to show the Word Count
showWordCount: true,
// Whether or not you want to show the Char Count
showCharCount: false,
// Maximum allowed Word Count
maxWordCount: 4,
// Maximum allowed Char Count
maxCharCount: 10
};
CKEDITOR.replace( 'editor1', {
extraPlugins: 'colorbutton,colordialog,font,wordcount',
toolbar: [
{ 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: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
]
} );
</script>
Your config variable (which is undefined) doesn't do anything. You need to set your configuration either in object passed to CKEDITOR.replace or in your config.js file. For more details see Setting CKEditor Configuration guide.
Here the easiest way would be to add wordcount plugin config to the CKEDITOR.replace call, like so:
<textarea id="editor1" name="editor1" maxlength="10" placeholder="5000 Characters Max.(with HTML)"></textarea>
<script>
CKEDITOR.plugins.addExternal( 'wordcount', '../../plug/wordcount/');
CKEDITOR.replace( 'editor1', {
extraPlugins: 'colorbutton,colordialog,font,wordcount',
toolbar: [
{ 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: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
],
wordcount: {
// Whether or not you want to show the Word Count
showWordCount: true,
// Whether or not you want to show the Char Count
showCharCount: false,
// Maximum allowed Word Count
maxWordCount: 4,
// Maximum allowed Char Count
maxCharCount: 10
}
} );
</script>
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.