Watermark text in CKEditor

Question

Do you know how to add watermark in CKEditor (visual word processor)? I want the behavior like this: When the CKEditor is loaded, it has text by default. When I click on it, text must disappear.

Answer 1

Below are the steps to add water mark in CKEditor

Generally when you set default text in Ck Editor through java script on page load. JavaScript event get fired before the control actually load so if possible set the text for code behind.

Attaching Events in Javascript for OnFocus and OnBlur

$(document).ready(function() {
    var myeditor = CKEDITOR.instances['EditorId'];

    myeditor.on("focus", function(e) {
        RemoveDefaultText();
    }); 
    myeditor.on("blur", function(e) {
        setDefaultText();
    });
});

Define your default text in this function

function setDefaultText() {
    if (CKEDITOR.instances['EditorId'].getData() == '') {
        CKEDITOR.instances['EditorId'].setData('Your Message Here'); 
    }
}

function RemoveDefaultText() {
   if (CKEDITOR.instances['EditorId'].getData().indexOf('Your Mesage Here') >= 0) {
       CKEDITOR.instances['EditorId'].setData('');
       CKEDITOR.instances['EditorId'].focus();
   }
}

You can also define styles to the water mark by adding classes to the default text and place the class into you ck editor content css otherwise it will not work

Answer 2

A ready to use plugin can be tested here. It allows to customize the default text and it takes into acount, dialogs as well as reading the data from an external script.

Answer 3

You might want to try this jQuery plugin:

https://github.com/antoineleclair/ckwatermark