2012/04/16

Placeholder text in CKEditor

This weekend I worked on a little bunch of code to support the HTML5 "placeholder" attribute in CKEditor.

The idea is simple: show a little text instead of empty content when the editor loads for the first time, and make it disappear automatically when the content gets focus.

There are two main problems to do this correctly: find out when the editor is focused or blurred and avoid the placeholder text when the content is read by other scripts.

In theory to get the focus status it should be enough to handle the 'focus' and 'blur' events of the editor instance, but one problem is that when a dialog opens the content fires a blur, but in in this situation we don't want to insert again the placeholder text, so the event listener checks if a dialog has been opened before inserting the text.

Passing that check we must verify if the content is "empty" so we get the raw data of the editor and test it again "empty" strings like "<br>" "<p>&nbsp;</p>" and the like that can be generated by different browsers.

As I didn't want to handle yet another plugin I've included it in the configuration Helper plugin and released as version 1.1. Also, the correct name for this plugin is already being used by a plugin that ships with the default CKEditor install but that it's totally unrelated to this feature that plugin resembles more the mail merge fields from MS Word, but at the time that plugin was created I don't think that HTML5 existed.

Demo:

You can set the focus in and out of the editor, type and delete, etc... when the editor isn't focused and it's empty it will show the text that I've specified for the textarea placeholder: "Type here..." While in Source mode it tries to leave that task to the browser if it already supports this feature.

 

4 comments:

History said...

This looks like a great plugin and I had actually creating some similar functionality prior to running across your plugin.

What I am trying to do is to use the templates feature of CKeditor and have each "area" within the template support the placeholder function independently.

I am struggling to get a handle to determine where within the template the user clicks and gives focus. Any thoughts?

Alfonso Martínez de Lizarrondo said...

Finding out where the user has clicked doesn't seem complex: you just set a click listener on the body element of the editor and whenever the event is fired find out the element that it was originally targeted at.

inghamc said...

Any chance of a version that works with inline editors in CKEditor 4.0.x?


I tried adding a placeholder attribute to the div and setting editor.config.placeholder, but no luck...

Alfonso Martínez de Lizarrondo said...

Thanks for the report.

I've tested and I've been able to reproduce the problem and it seems that it's easy to fix.

I'll try to publish an update this weekend.