The plugin provides two features related to the dialogs: The first one is the removal of individual fields, and the second one is setting default values different from the original ones.
There's nothing special in this plugin, You can do the very same thing following these two articles at the CKEditor documentation center: customizing dialogs and setting default values, but with this plugin is slightly easier as you don't have to change any code , you only have to adjust the config values.
For detailed instructions read the doc included in the plugin, but the basic steps are:
Include the plugin
config.extraPlugins='confighelper';Define the fields to remove
config.removeDialogFields='image:info:txtBorder';And/Or define the default values for fields:
config.dialogFieldsDefaultValues =
{
image:
{
advanced:
{
txtGenClass : 'myClass',
txtGenTitle : 'Image title'
}
}
};
Version 1.1 includes support for the Placeholder attribute.
Version 1.2 allows to hide dialog fields.
Version 1.3 is compatible with CKEditor 4.
Version 1.4 enables the Placeholder while using inline editing.
Version 1.5 fixes compatibility with CKEditor 3.6.
Version 1.6 checks the calls to setData in the editor to update the "placeholder" status
Version 1.7 fixes initial placeholder text with latest CKEditor.
You can download the plugin here: Configuration Helper
I couldn't see an example of how to change the default values, so I added the following to my config.js, but it doesn't work.
ReplyDeleteI assume it's the way I formatted the set default statement:
config.extraPlugins='confighelper';
config.dialogFieldsDefaultValues = 'table:txtWidth:default:100%';
I am trying to change the default Table width from 500 to 100%.
Any help would be appreciated. I am far from an expert on js and the documentation on CKeditor sometimes assumes too much.
Thanks in advance.
Tony
Are you kidding me?
ReplyDeleteAre you really unable to read the post and use the example that I've provided?
Having spent hours trying to understand the CKeditor documentation before I came across your plugin, my brain was hurting and it was already late in the day.
ReplyDeleteWith a fresh day beginning I think the correct way is:
config.dialogFieldsDefaultValues = 'table:txtWidth:100%';
but not 100% sure. Off to check...
It makes a lot of difference if you know JS well, which I don't. My background is RPG (IBM iSeries) and not object oriented code.
FINALLY! Only took me 3 1/2 hours today - with interruptions. Works nicely, thanks :)
ReplyDeleteVery nice option for HTML5 placeholder. Works great.
ReplyDeleteQuick question; how would you go about adding a class and inline-style by default?
ReplyDeleteThe name of the fields depend on each dialog, in the sample you can see that the "class" for images is controlled with config.dialogFieldsDefaultValues = { image: { advanced: { txtGenClass : 'myClass' } } }
ReplyDeleteUsing the devTools plugin (included in the samples) you can check the name of each dialog field.
Expanding the answer, to get the changes described in your blog you just need these settings:
ReplyDeleteconfig.dialogFieldsDefaultValues =
{
table:
{
info:
{
txtCellSpace : '0',
txtCellPad : '0'
},
advanced:
{
advStyles : 'table-layout:fixed;',
advCSSClasses : 'myClassName'
}
}
};
Thanks a lot. This was really helpful :)
ReplyDeleteHello,
ReplyDeletei'm sorry, i'm not kidding :-(((
but i followed the install.html and now i'm in "3. Configuration" : i don't understand where to go and what to do (i do not see any new element of configuration in global settings or profile settings for CKEditor - using CKEditor in Drupal)
Thanks
PS : let's say same exemple as Poddys : table width
ReplyDeleteThat sounds like a question about the integration of CKEditor with Drupal.
ReplyDeleteusually you can edit the config.js file and you're ready following the samples.
But if you try to do it from inside Drupal, then I don't have a clue about how to add extra configuration options and you should ask about that in their tracker.
Any chance of a confighelper version for CKEditor 4.0.x that supports inline editors (div instead of textarea)?
ReplyDeleteThanks!
Dear Alfonso,
ReplyDeleteI get a error in IE9.
This is my config:
var config = {
...
placeholder : 'Digite aqui...',
...
later into code javascript....
config['placeholder'] = 'some value';
CKEDITOR.replace("myeditor" , config );
Then I get error in IE9 (IE9-IE9 in debug):
SCRIPT5007: Não é possível obter valor da propriedade 'length': o objeto é nulo ou não definido (data is undefined)
plugin.js?t=DAED, linha 16 Caractere 2
function dataIsEmpty( data )
{
if ( data.length > 20 )
return false;
...
}
I wrote this code:
if (data === undefined) data = '';
before
if ( data.length > 20 )
return false;
This work, but why data is undefined, I really do not know.
Thanks!
@Edson
ReplyDeleteJust this weekend another user reported that error and I published a minor version to fix that problem: 1.8.1
The problem seems to be that CKEditor does some strange initialization of the instance in old IEs and instead of wasting the time filing a bug that will be ignored for months I added a simple check to avoid it.
Dear Alfonso, thanks for the quick turnaround.
ReplyDeleteI tested version 1.8.1 on both ckeditor 4.3.3 and 4.3.4. No errors in replacebycode.html, but unfortunately for my project the error persists. Maybe because I use many plugins. Really do not know. For now, I will keep the code if (data === undefined) data ='';
with best regards
Hello Alfonso,
ReplyDeletethe following code is applied for table: config.dialogFieldsDefaultValues =
{
table:
{
info:
{
txtCellSpace : '0',
txtCellPad : '0'
},
advanced:
{
advStyles : 'table-layout:fixed;',
advCSSClasses : 'myClassName'
}
}
};
my question is, what is the field name for style classes within image? because I cant apply "advCSSClasses" into image dialog.
It would be nice if anyone can give me direction on how to define those element names within dialog window.
Thanks!
You can get all the data about any dialog with the devtools plugin:
ReplyDeletehttp://docs.cksource.com/CKEditor_3.x/Howto/Field_Names
Thanks for the fast respond Alfonso.
ReplyDeleteI am sorry I didn't notice that you have given the example to set default class on image:
config.dialogFieldsDefaultValues =
{
image:
{
advanced:
{
txtGenClass : 'myClass',
txtGenTitle : 'Image title'
}
}
};
So I added code above within ckeditor.config.js, I look in console, the code is applied, but it doesn't give class value within my image dialog. Am I missing something?
I've tested right now that configuration and it works fine, so it seems that you're doing something wrong on your side.
ReplyDeleteThis is so weird, any configuration I apply for image doesn't work. FYI, I am using Drupal, I installed image_resize_filter module to enable image height and width attributes, this module doesn't work at all on my drupal site. I also applied code within config.js to allow image height and width, it doesn't work either. I can't think of anything that I have done wrong with my ckeditor. And thank you by the way for retesting it for me.
ReplyDeleteYou should have started with that info.
ReplyDeleteI can't understand what's going on with Drupal but it seems that either it's too complex to install there any CKEditor plugins or the configuration is ignored or they have modified everything but whenever I see people struggling with CKEditor, most of the times is because they are using Drupal.
I hope that you are able to find a solution to your problem.
Hi, I would like to change the color of the placeholder using js, how can I do it?
ReplyDeleteI need it to be red if the user clicks the submit button without entering text in the field. I looked in the ckeditor documentation for what property should I change in the ckeditor object but I couldn't find it, sorry if it's there.
When the placeholder is active my plugin adds a "placeholder" class (quite original) to the editor root element, then it's up to you to add additional CSS in your page to tune it in any way that you like. Surely you'll have much better aesthetic taste than I do :-)
ReplyDeleteUhm, I can add css for styling the .placeholder class, but I will also need to _change_ the class of the element when the user clicks de submit button, like I'm doing with other "normal" fields in jQuery:
ReplyDelete$('#input_title').addClass("error");
Or if it's not possible, just add a css property to the element
$("#input_title").css({"color": "#f00"});
I don't know if I'm explaining myself properly :)
And don't make assumptions about my aesthetic taste, hahaha
The "placeholder" is really the editor with my class and the template text, so if you want to change it, change the editor root as I suggested.
ReplyDeleteFor example: editor.editable().addClass("error")
Aaaahhh now I understand, thank you!
ReplyDeleteHi there!
ReplyDeleteI have a problem when using your confighelper plugin. When I refocus using jQuery onto the instance of CKeditor, the placeholder doesn't clear and it results in typing with grey font (your placeholder font color). More details here : http://stackoverflow.com/questions/29192577/ckeditor-how-to-focus-onto-textarea-instead-of-its-placeholder
How do I solve it? Thank you for a great plugin!
Hi, it seems not support in 'inline' mode.
ReplyDeleteHi, I think it does.
ReplyDeleteYou must state clearly the problem if you want me to take a look at it.
Hi,
ReplyDeleteIs it possible to update the placeholder text without destroying an existing editor and creating a new one?
Hi Ying
ReplyDeleteI'm sorry, but you'll have to modify the code of the plugin to achieve that as I didn't take that into account.
If you share back those changes and they look OK I'll release a new version so everyone can use it.
Hello, I know I am years past the last comment. I am wondering if I can add this placeholder to multiple instances of cke? Currently it is only working in one of my editors.
ReplyDeleteThanks