Texto de marca de agua en CKEditor

Question

¿Sabe cómo agregar una marca de agua en CKEditor (procesador de texto visual)? Quiero un comportamiento como este: cuando se carga el CKEditor, tiene texto por defecto.Cuando hago clic en él, el texto debe desaparecer.

Answer 1

A continuación se muestran los pasos para agregar una marca de agua en CKEditor

Generalmente, cuando configura el texto predeterminado en Ck Editor a través del script java al cargar la página.El evento de JavaScript se activa antes de que el control se cargue realmente, por lo que, si es posible, configure el texto para el código subyacente.

Adjuntar eventos en Javascript para OnFocus y OnBlur

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

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

Defina su texto predeterminado en esta función

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

También puede definir estilos para la marca de agua agregando clases al texto predeterminado y colocar la clase en su ck editor content css; de lo contrario, no funcionará

Answer 2

Un complemento listo para usar se puede probar aquí .Permite personalizar el texto predeterminado y tiene en cuenta los diálogos, así como leer los datos de un script externo.

Answer 3

Es posible que desee probar este complemento de jQuery:

https://github.com/antoineleclair/ckwatermark