Wasserzeichentext in CKEditor

Question

Wissen Sie, wie Sie in CKEditor (visuelles Textverarbeitungsprogramm) Wasserzeichen hinzufügen? Ich möchte das Verhalten wie folgt: Wenn der CKEditor geladen wird, enthält er standardmäßig Text.Wenn ich darauf klicke, muss der Text verschwinden.

Answer 1

Nachfolgend finden Sie die Schritte zum Hinzufügen eines Wasserzeichens in CKEditor

Im Allgemeinen, wenn Sie beim Laden der Seite den Standardtext im Ck-Editor über ein Java-Skript festlegen.Das JavaScript-Ereignis wird ausgelöst, bevor das Steuerelement tatsächlich geladen wird. Legen Sie daher nach Möglichkeit den Text für den Code dahinter fest.

Anhängen von Ereignissen in Javascript für OnFocus und OnBlur

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

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

Definieren Sie Ihren Standardtext in dieser Funktion

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

Sie können dem Wasserzeichen auch Stile definieren, indem Sie dem Standardtext Klassen hinzufügen und die Klasse in den css des ck-Editor-Inhalts einfügen, da dies sonst nicht funktioniert.

Answer 2

Ein gebrauchsfertiges Plugin kann hier .Es ermöglicht das Anpassen des Standardtexts und berücksichtigt Konten, Dialoge sowie das Lesen der Daten aus einem externen Skript.

Answer 3

Vielleicht möchten Sie dieses jQuery-Plugin ausprobieren:

https://github.com/antoineleclair/ckwatermark