I want to use <(label)> tag as well as class="" attribute in <(span)> margin-left (property in span) tag but ckeditor automatic replace label tag and class from span and it also remove margin property from style attribute in span tag
Ckeditor apply ACF (Advanced Content Filter) by default. If you don't want to apply this you can disable by add this in your config file :
CKEDITOR.config.allowedContent = true
This will allow all type of input into your editor. You can read more detail here.
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
'/',
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'paragraph', groups: [ 'list', 'blocks' ] },
{ name: 'document', groups: [ 'mode' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,PasteText,PasteFromWord,Find,Replace,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Outdent,Indent,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,Subscript,Superscript,Strike,BidiLtr,BidiRtl,Language,Anchor,Flash,Table,HorizontalRule,PageBreak,Iframe,Styles,Format,Font,Maximize,ShowBlocks,About,SpecialChar,Templates';
config.extraAllowedContent = 'label';// This will allow label tag..
};
You have to edit config.js file.
CKEDITOR version 4
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty.span = 0;
CKEDITOR.dtd.$removeEmpty.figure = 0; ...etc any tag
Related
I changed my CKeditor config.js file to include all the buttons possible to this:
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' ] }
];
};
This config was generated using the CKeditor config generator tool.
After the change was deployed to my server and the page was refreshed using incognito mode in chrome none of the buttons changed.
If I add this code directly in my admin.master then the new button does show.
<script>
jQuery(function() {
CKEDITOR.config.extraPlugins = 'justify';
});
</script>
Is it possible that I am not using the config.js at all?
There's a Github issue that was posted for this https://github.com/galetahub/ckeditor/pull/433 (a long time ago).
Also, a discussion post about unreflected changes when using CKEDITOR.editorConfig here: https://ckeditor.com/old/forums/CKEditor-3.x/config.js-changes-not-reflected
My suggestion:
Try to clear the cache after you change the config.
Check the "console" tab in your developpers inspector inside the browser to verify if there's is any errors.
As an alternative you could use the replace() method after destroying the loaded instance inside the instanceReady event callback like :
CKEDITOR.instances.editor1.on("instanceReady", function(event) {
CKEDITOR.instances.editor1.destroy();
CKEDITOR.replace('editor1', {
toolbarGroups
});
});
Working demo fiddle.
I had this same problem and I had to delete the browser data. In Chrome you can select a time range. At first, I selected the last hour and this didn't work. Then I selected all times and it did.
I recently started working with CKEditor, but the toolbar has functions we will not be using.
I tried copying the code from the online toolbar configuration, but the toolbar doesn't change.
my config.js file looks like this:
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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};
which was copies directly from the configuration tool.
After the above, I tried pasting the code into the initialization function like the following block:
jQuery(function()
{
var editor = CKEDITOR.replace( 'message',
{
extraPlugins : 'stylesheetparser',
extraPlugins : 'filebrowser',
extraPlugins : 'popup',
//contentsCss : '<?= base_url(); ?>css/layout.css',
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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
});
CKFinder.setupCKEditor(editor);
});
I also tried simply to show one part of the toolbar like this:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
];
};
None of the above changed anything in the toolbar, so I am not sure if I overlooked something.
Any help will be appreciated.
Please make sure you properly define your configuration - check the Setting CKEditor Configuration article for some code examples. Some of the mistakes you are doing:
Mixing up config.optionName and optionName.
Declaring extraPlugins multiple times - you should put all extra plugins into one declaration: config.extraPlugins = 'myplugin,anotherplugin';
Also check some of the CKEditor SDK samples for examples - if you open any of them (like this one), scroll down to the "Get Sample Source Code" section and grab the source code to copy.
Last but not least, use the JavaScript console of your browser to check for errors and clear the cache after each change!
And finally, it makes little sense to download a bloated CKEditor package and then remove plugins/buttons in your configuration - better create a custom build in CKBuilder.
include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>
<textarea id="user_message"></textarea>
<script type="text/javascript">
var 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' ] }
];
var initEditor = function() {
return CKEDITOR.replace( 'user_message',{
toolbar : 'Basic',
uiColor : '#9AB8F3',
toolbarGroups,
});
}
initEditor();
</script>
Demo
my CKEditor config.js changes were not reflected in my toolbar until i put matched the same path as the Samples had. ex: the working sample has this path:
ckeditor\samples\index.html
ckeditor\config.js
so i made my working web page app with ckeditor this:
rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php
before, i had ckeditor on the same level as root, but i moved it into root.
of course i had to change the relative path statements, which are now this[and showing the other code that enables the div to show the CKEditor toolbar]:
echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";
i hope this helps someone!
I have download same extra plugins and past the plugins into plugins folder. ckeditor/plugins/lineheight and ckeditor/plugins/language.
And enable in config.js. But so for the line height and language option is not show in ckeditor.
config.extraPlugins = 'lineheight';
config.extraPlugins = 'language';
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
By doing a double assignment
config.extraPlugins = 'lineheight';
config.extraPlugins = 'language';
you basically override config.extraPlugins property, so it equals 'language'. Do this instead:
config.extraPlugins = 'lineheight,language';
I know this is an old post but I just want to share the solution for future reference.
Assuming that you added extraPlugin correctly, you will also need the following in your config:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
// The toolbar groups arrangement, optimized for a single toolbar row.
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' }
];
// The default plugins included in the basic setup define some buttons that
// are not needed in a basic editor. They are removed here.
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
};
Most of the options are optional but { name: 'styles' } is required.
Make sure
lineheight is not mentioned in config.removeButtons in \ckeditor\config.js
config.removeButtons ="lineheight"
config.extraPlugins = 'lineheight, language';
config.line_height = "1px;1.1px;1.2px;1.3px;1.4px;1.5px";
Toolbar : {
name: 'styles',
items: [ 'Styles', 'Format', 'Font', 'FontSize','lineheight' ]
},
I am inserting the image in the content of ckeditor 4.4.0.
when i put url of image like http://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg
and set the image size and position.
the image comes correct on current preview. after this i save the data into database it filter the img style tag from html due to which i am not getting correct img.
my current ckeditor config is
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// config.toolbar = 'Full';
config.toolbarGroups =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
config.allowedContent= 'true';
};
My input data:
<img alt="" src="http://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg" style="float:right; height:100px; width:300px" />
Output data:
<img alt="" src="http://www.asge.org/uploadedImages/Patients/National_Colorectal_Cancer_Awareness_Month/NCCAM_Banner_36x12.jpg" />
WRONG:
config.allowedContent= 'true';
OK:
config.allowedContent= true;
BTW. You also configure toolbar incorrectly. Note that there are two settings - config.toolbar and config.toolbarGroups. Read more in the Toolbar customization guide.
I'm using ckeditor inline mode. When i enter some html code by clicking on source button and after closing it when i reopen by clicking on source button only content inside body tag is been showing.
I have searched in ckeditor forums that all these html and body tags can be seen using configuration setting
config.fullPage = true;
I tried but that didn't work. Can someone please tell me why it was not working with inline mode.
Here is my configuration setting:
CKEDITOR.editorConfig = function( config ) {
// %REMOVE_START%
// The configuration options below are needed when running CKEditor from source files.
config.fullPage = true;
config.plugins = 'dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,clipboard,button,panelbutton,panel,floatpanel,colorbutton,colordialog,menu,contextmenu,div,resize,toolbar,elementspath,enterkey,entities,popup,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,indentblock,indentlist,smiley,justify,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc,sourcedialog,tokens';
config.skin = 'moono';
config.filebrowserBrowseUrl = '../kcfinder/browse.php?type=images';
config.filebrowserUploadUrl = '../kcfinder/upload.php?type=images';
config.allowedContent = true;
config.scayt_autoStartup = true;
config.baseFloatZIndex = 900;
config.removePlugins = 'youtube';
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
'/',
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'tokens'},
{ name: 'others' }
];
It's not working because it can't work. In full page mode you can edit entire document, so where and how would you like to load CKEditor there if all that has to be inline?