Question

我有一些编辑框，我想添加占位符文本。

<textarea rows="10" cols="20" data-bind="kendoEditor: {
      value: Text, 
      attr: { placeholder: 'Test place holder' }}" > 
 </textarea>

看起来占位符文本标记不会从textarea传递到编辑器。

以下是一个可以使用的示例编辑框：http://jsfiddle.net/cN2ke/

我想我必须听取编辑的改变事件，如果我的水印HTML中没有文字粘贴。

我遇到的问题是当页面发布了如何剥离水印的时候。我想我可以对占位符值进行字符串比较，但这对我来说似乎有点俗气。

以为我会检查并查看编辑器控件中是否有人对水印文本有一个很好的解决方案

谢谢！

Answer 1

这是我实施的解决方案

文字区域

<textarea id="custInfoPriorPerformance" rows="10" cols="20" data-bind="kendoEditor: { value: AccountPlanVM.AccountPlan.PriorYearSummary }" > </textarea>

在视图模型中使用控件的Id，observable和占位符文本创建options变量

self.PlaceholderOptions =
        {
            CustomerInfoAccountBackground: ['#custInfoAccountBackground', self.AccountPlanVM.AccountPlan.AccountBackground, "<div style=\"" + self.PlaceholderStyle + "\">" + 'Placeholder Example Text' + "</div>"]
        };

加载时，我绑定到编辑框的焦点/模糊。在发布表单之前，我清除了observable中的占位符文本。

//Editor Placeholder methods
    self.BindEditorPlaceholders = function() {
        for (var propt in self.PlaceholderOptions) {
            //Options array
            var options = self.PlaceholderOptions[propt];

            // get a reference to the Editor
            var editor = $(options[0]).data("kendoEditor");

            //Currently saved value 
            var currentValue = options[1]();

            //If we don't have any text saved, inject placeholder
            if (!currentValue) {
                editor.value(options[2]);
            }

            //Attach Events to Editor Iframe
            $(options[0]).siblings(".k-content").focus(options, self.EditorFocus);
            $(options[0]).siblings(".k-content").blur(options, self.EditorBlur);
        }
    };

    self.EditorFocus = function(e) {
        //Options array
        var options = e.data;

        // get a reference to the Editor
        var editor = $(options[0]).data("kendoEditor");

        //Current editor value
        var htmlValue = editor.value();

        if (htmlValue == options[2]) {
            //Clear editor value
            editor.value('');
        }
    };

    self.EditorBlur = function (e) {
        //Options array
        var options = e.data;

        // get a reference to the Editor
        var editor = $(options[0]).data("kendoEditor");

        //Current editor value
        var htmlValue = editor.value();

        if (htmlValue == '') {
            //Set editor value back to placeholder
            editor.value(options[2]);
        }
    };

    self.CleanEditorPlaceholders = function() {
        for (var propt in self.PlaceholderOptions) {
            //Options array
            var options = self.PlaceholderOptions[propt];

            // get a reference to the Editor
            var editor = $(options[0]).data("kendoEditor");

            //Currently saved value 
            var currentValue = options[1]();

            //If the current text is the placeholder, wipe it out
            if (currentValue == options[2]) {
                options[1]('');
            }
        }
    };

Answer 2

@Andrew Walters：谢谢您的解决方案。我尝试在 self.BindEditorPlaceholders 下的.k-content兄弟上实现焦点和模糊事件处理程序，但焦点事件并没有使用Kendo 2014.1.624（beta）版本为我开火。所以，我想为遇到同样问题的其他人发布替代方案（基于Kendo Editor源代码）：

在 self.BindEditorPlaceholders 下，而不是：

$(options[0]).siblings(".k-content").focus(options, $scope.EditorFocus);
$(options[0]).siblings(".k-content").blur(options, self.EditorBlur);

可以尝试：

$(editor.body).on('focus.kendoEditor', options, $scope.EditorFocus);
$(editor.body).on('blur.kendoEditor', options, $scope.EditorBlur);

我并不是说这两种方法中的两种方法中的哪一种更好，并且避免依赖.k-content DOM元素的兄弟位置可能会或者可能不会更好，因为未来的Kendo版本。但是，它有效。

Kendo-UI编辑器占位符

2 个答案: