Question

我正在使用ckeditor来显示格式化文本。我正在使用Asp.net mvc 3 razor帮助方法Html.CKEditorFor（x =＆gt; x.Description）用于上述目的。我需要实现此ckeditor中的水印功能。我正在使用以下代码，

    $("#Description").focus(function() {

    $(this).filter(function() {

        // We only want this to apply if there's not
        // something actually entered
        return $(this).val() == "" || $(this).val() == "Type here"

    }).removeClass("watermarkOn").val("");

});

但是当我关注ckeditor文本框时焦点事件没有触发。所以我使用firebug检查了文档，发现默认文本是在mvc ckeditor helper生成的下面的类（'cke_show_borders'）中呈现的。所以我修改了上面的代码

    $(".cke_show_borders").focus(function() {
    $(this).filter(function() {

        // We only want this to apply if there's not
        // something actually entered
        return $(this).val() == "" || $(this).val() == "Type here"

    }).removeClass("watermarkOn").val("");

});

但焦点事件仍未触发。我错的地方请帮忙。感谢。

Answer 1

我最好的猜测是你应该尝试使用他们的 API代替jQuery。你看过他们的developer features吗？

顺便说一句，我见过人们使用类似的东西来改变CKEditor的默认行为：

var editor = CKEDITOR.replace('ckeditor');
editor.on('instanceReady', function(e) {
    // customize stuff here
    // this.document.$.childNodes[1].childNodes[1].style.styleName = 'value';
    editor.focus();
});

同样，你可以像这样修改他们的onfocus事件：

editor.on('focus', function(e) {
    // code here
});

Answer 2

确保您已将此代码放在$(document).ready处理程序中，以确保在尝试订阅任何事件之前已完全加载DOM：

$(function() {
    $('.cke_show_borders').focus(function() {
        $(this).filter(function() {
            // We only want this to apply if there's not
            // something actually entered
            return $(this).val() == '' || $(this).val() == 'Type here';
        }).removeClass('watermarkOn').val('');
    }); 
});

使用CKEditor从文本框中触发焦点事件

2 个答案: