I am using CKEditor 4.5.11 in my responsive design website. Everything seems to be working fine except 2 ckEditor issues which are listed as under:
How to make images inserted responsive in ckEditor? I used my CSS for them but it didn't work at all. Even it didn't apply to those.
How to convert ckEditor full toolbar into basic and simple toolbar for mobile (small screen) devices e.g. when width goes less than 600px?
I searched a lot on Google and Stack Overflow but no proper solution has been given there except a few Drupal based workaround which I have nothing to deal with and none of my business. I think this topic is not considered seriously on Internet so far.
Any ckEditor plugin, custom JS or CSS solution will be accepted if it does work. Note that I don't want to change (upgrade) my ckEditor because it is very well setup with ckFinder and when I upgraded in past then everything got broken. So please no suggestion on upgrade.
For responsive images, use this:
CKEDITOR.addCss('.cke_editable img { max-width: 100% !important; height: auto !important; }');
If you want to modify the toolbar when browser resizes, you can't do that without destroying the instance and recreate it with another toolbar configuration (the contents will not get lost). For that, you can use window.matchMedia (supported in Firefox, Chrome and IE 10) like this:
var toolbar_basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
]
var toolbar_full = [
{ 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' ] }
]
var mqs = [
window.matchMedia('(max-width: 600px)')
]
mqs.forEach(function(mq) {
mq.addListener(widthChange);
});
widthChange(); // call it once initially
function widthChange() {
if (CKEDITOR.instances.editor1) {
CKEDITOR.instances.editor1.destroy();
}
if (mqs[0].matches) {
// window width is less than 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_basic });
} else {
// window width is at least 600px
CKEDITOR.replace('editor1', { toolbar: toolbar_full });
}
}
Related
I am trying to setup CKEditor Table Tools and I had some difficulties, could someone please help me?
Is there a way to transform the table tools buttons on a kind of a Dropdown Menu? I want my user to be able to use all the buttons, but without using so much space on my toolbar, so if they could press a button that would reveal all the table tools buttons would be great!
How do I fix positions for the buttons? Now, everytime my CKEditor reloads, buttons are on a different position, and that's bad for the user.
How do I create buttons groups? Now my table tools buttons look like this:
but I'd like them to have organized groups as in the Demo page (http://doksoft.com/soft/ckeditor-table-tools/demo.html), like this:
Here is my current config file (some stuff are commented because I was learning):
CKEDITOR.editorConfig = function( config ) {
// %REMOVE_START%
// The configuration options below are needed when running CKEditor from source files.
config.plugins = 'basicstyles,dialogui,dialog,clipboard,button,toolbar,entities,floatingspace,wysiwygarea,indent,indentlist,list,undo,autogrow,base64image,panelbutton,panel,floatpanel,colorbutton,colordialog,menu,contextmenu,resize,imageresize,eqneditor,find,listblock,richcombo,font,htmlwriter,indentblock,symbol,justify,liststyle,menubutton,pastetext,pastefromword,wordcount,pastebase64,removeformat,showborders,scayt,tabletools,lineutils,widget';
config.skin = 'moonocolor';
// %REMOVE_END%
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// 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: 'styles' },
{ name: 'colors' },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
//{ name: 'doksoft', groups: ['doksoft_table'] }
];
// config.toolbar = [
// ['doksoft_table_conf','doksoft_table_new'] ,
// ['undo', 'scayt']
// ];
//config.toolbar_name = [ [ 'doksoft_table_conf,doksoft_table_new,doksoft_table_row_conf,doksoft_table_col_conf,doksoft_table_cell_conf,doksoft_table_add_row_up,doksoft_table_add_row_down,doksoft_table_add_col_left,doksoft_table_add_col_right,doksoft_table_add_cell_left,doksoft_table_add_cell_right,doksoft_table_row_move_up,doksoft_table_row_move_down,doksoft_table_col_move_left,doksoft_table_col_move_right,doksoft_table_delete_col,doksoft_table_delete_row,doksoft_table_delete_cell,doksoft_table_merge_cells,doksoft_table_merge_cell_right,doksoft_table_merge_cell_down,doksoft_table_split_cell_hor,doksoft_table_split_cell_vert' ] ];
// 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,Anchor,Strike,Font,Replace,Table';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
config.language = 'pt-br';
config.width = 575;
//Opções do contador de palavras
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,
// Whether or not to include Html chars in the Char Count
countHTML: false
}
// Opções do corretor automático em PT-BR
config.scayt_autoStartup = true;
config.scayt_sLang = 'pt_BR';
config.scayt_uiTabs = '1,1,0';
//Tamanhos padrão de fonte
config.fontSize_defaultLabel = '12';
config.extraPlugins = 'dragresize,doksoft_table_new,doksoft_table_conf,doksoft_table_row_conf,doksoft_table_col_conf,doksoft_table_cell_conf,doksoft_table_row_move_up,doksoft_table_row_move_down,doksoft_table_col_move_left,doksoft_table_col_move_right,doksoft_table_add_row_up,doksoft_table_add_row_down,doksoft_table_add_col_left,doksoft_table_add_col_right,doksoft_table_add_cell_left,doksoft_table_add_cell_right,doksoft_table_delete_col,doksoft_table_delete_row,doksoft_table_delete_cell,doksoft_table_merge_cells,doksoft_table_merge_cell_right,doksoft_table_merge_cell_down,doksoft_table_split_cell_hor,doksoft_table_split_cell_vert';
config.fontSize_sizes = '6/8px;8/11px;9/12px;10/14px;11/15px;12/16px;14/19px;16/22px;18/24px;20/27px;22/30px;24/32px;26/35px;28/38px;36/48px;54/72px;72/96px;';
};
I'm using windows 10, chrome 44.0.2403.157 m and CKEditor 4.5.3
CKEditor does not support dropdown button menues by default. You need additional plugin for that.
Define not as a group but as single buttons set. See (3).
Here is toolbar configuration for you:
config.toolbar = [
['doksoft_table_new'],
['doksoft_table_conf','doksoft_table_row_conf','doksoft_table_col_conf','doksoft_table_cell_conf'],
['doksoft_table_add_row_up','doksoft_table_add_row_down','doksoft_table_add_col_left','doksoft_table_add_col_right'],
['doksoft_table_add_cell_left','doksoft_table_add_cell_right'],
['doksoft_table_row_move_up','doksoft_table_row_move_down','doksoft_table_col_move_left','doksoft_table_col_move_right'],
['doksoft_table_delete_col','doksoft_table_delete_row','doksoft_table_delete_cell'],
['doksoft_table_merge_cells','doksoft_table_merge_cell_right','doksoft_table_merge_cell_down'],
['doksoft_table_split_cell_hor','doksoft_table_split_cell_vert']
];
I'm using CKEditor 4.1.1 and can't figure out how to show the Insert Image button in th toolbar. This is my current CKEditor configuration in config.js.
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// 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
// we don't want too have in a basic editor. We remove them here.
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript,Font,SpellChecker';
config.disableNativeSpellChecker = false;
config.removePlugins = 'scayt,menubutton,contextmenu';
// Let's have it basic on dialogs as well.
config.removeDialogTabs = 'link:advanced';
};
How should I modify this to show the Insert Image button?
I have been reading the documentation and trying various things, but nothing has worked thus far.
I used to have the same issues long time ago. I have opened my old site code to check it out for you :
try to add this to your config.js
in the config.toolbarGroups Object
{ name: 'insert', items: [ 'Image']},
instead of
{ name: 'insert'},
if that doesn't work replace image with lowercase
Btw I have found this documentation which might be helpful
Good Luck
first you need to check your
CKEditor Which css using for example
CK Editor\skins\office2003\editor.css in that you can add image the icon of image button i searched and checked it works for me
.cke_skin_office2003 .cke_button a.cke_button_ICONNAME .cke_icon
{
background-image:url(ICONNAME.png);
background-repeat:repeat;
background-position:0px;
}
hopes it helps some one
Make sure you install the Image (https://ckeditor.com/cke4/addon/image). Extract the downloaded file, and put into plugins folder in ckeditor installation path. after that, edit your config.js file put line like below:
CKEDITOR.editorConfig = function( config ) {
.....
config.extraPlugins = 'image';
});
Reload your page and done.
I have an editor instance that opens inside a modal dialog (on a jquery.dialog("open")).
The problem is that sometimes in Chrome browser, the editable area comes disabled by default (and the user cannot write any text). I can do two thing to enable it :
Click the 'source' button twice
Resize the editor
Is this a known problem? I cannot find any sources/solutions on it.
Please note that Firefox browser has never created this problem.
Also this question addresses this problem CKeditor textarea is disabled up until when I click the source button? but no answer is given.
Thanks
UPDATE
My html
<textarea name="problem" id="problem" class="ckeditor" ></textarea>
My initialization code:
var editor = CKEDITOR.instances.problem;
editor.setData('');
editor.resize( '100%', '80', true );
My config.js :
CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
{ name: 'document', items : [ 'Preview','Print','-','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','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink', ] },
{ name: 'insert', items : [ 'Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','Source'] }
];
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
config.scayt_autoStartup = true;
config.skin = '/kama';
config.entities_processNumerical = 'force';
};
UPDATE 2
Here is also a screen shot of what is happening this time in Firefox 21.0:
The difference between the Chrome error is that the 2 steps listed above to enable the editor didn't work. I had to refresh the page in order to make it work.
Here is the actual html code when this occurred.
Please also note that there where no console errors.
I am using CKEditor 4 with inline editing. I want to set custom height to the CKEditor toolbar that appears. I looked around and found a solution
config.height = 300;
config.width = 550;
I wrote the above two lines in the config.js file. But sadly, its not working for me.
Any Ideas? Or inline editing doesnt support custom height?
EDIT :
I alsp tried this in my js
editor.resize( 900, 300 );
but no luck
Just use the linebreak '/' as Zee suggested in the comment area.
For example:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'basicstyles', 'cleanup'] },
'/',
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'links' },
...
]
The linebreak will break the buttons into two rows.
I am using CKEditor and have defined a custom toolbar in the config.js file.
However, this custom toolbar does not appear when I refresh the page where I have the CKEditor appearing.
Below is my custom toolbar in the config.js file.
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'Custom';
config.toolbar_Custom =
[
{ name: 'document', items : [ 'NewPage','Preview' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'
,'Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'tools', items : [ 'Maximize','-','About' ] }
];
};
Is there anything else that I need to do other than just adding the toolbar to the config file.
Thanks for your time and help.
There are two things that could be happening. One, your config.js file could be cached, so it's loading the previous file from before your changes were made, in which case you need to either clear your browser cache or hit ctrl-F5 in your browser to fully reload your page. Or two, you're using a combo-loaded (and minified) config.js file, which would mean that you need to run the packaging tool every time you make changes to the file. See this for more info on the packaging tool. Hope that helps!