在CKEditor中为文本添加水印

Question

你知道如何在CKEditor (视觉文字处理器)中添加水印吗？我想要这样的行为:当加载CKEditor时，默认情况下它有文本。当我点击它时，文本必须消失。

Answer 1

下面是在CKEditor中添加水印的步骤

通常，当您在Ck编辑器中通过java脚本在页面加载时设置默认文本时。JavaScript事件在控件实际加载之前被激发，因此如果可能的话，请设置代码的文本。

在OnFocus和OnBlur的Javascript中附加事件

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

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

在此函数中定义默认文本

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

您还可以通过向默认文本添加类来定义水印的样式，并将该类放入ck编辑器内容css中，否则将不起作用。

Answer 2

一个现成的插件可以通过here测试。它允许自定义默认文本，并接受帐户、对话框以及从外部脚本读取数据。

Answer 3

你可能想试试这个jQuery插件：

https://github.com/antoineleclair/ckwatermark