Texto da marca d'água no CKEditor

Question

Você sabe como adicionar marca d'água no CKEditor (processador de texto visual)? Eu quero o comportamento assim: Quando o CKEditor é carregado, ele tem texto por padrão.Quando clico nele, o texto deve desaparecer.

Answer 1

Abaixo estão as etapas para adicionar marca d'água no CKEditor

Geralmente, quando você define o texto padrão no Ck Editor por meio de java script no carregamento da página.O evento JavaScript é disparado antes que o controle realmente carregue, então, se possível, defina o texto para o code-behind.

Anexando eventos em Javascript para OnFocus e OnBlur

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

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

Defina seu texto padrão nesta função

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();
   }
}

Você também pode definir estilos para a marca d'água adicionando classes ao texto padrão e colocar a classe em seu ck editor de conteúdo. Caso contrário, não funcionará

Answer 2

Um plugin pronto para uso pode ser testado aqui .Ele permite personalizar o texto padrão e leva em conta, diálogos, bem como ler os dados de um script externo.

Answer 3

Você pode querer experimentar este plugin jQuery:

https://github.com/antoineleclair/ckwatermark