Kendo-UI 编辑器占位符答案

【问题标题】：Kendo-UI Editor PlaceholderKendo-UI 编辑器占位符
【发布时间】：2013-07-26 21:29:11
【问题描述】：

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

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

看起来占位符文本标签没有从文本区域传递到编辑器。

这是一个示例编辑器框：http://jsfiddle.net/cN2ke/

我想我必须监听编辑器的更改事件，如果我的水印 HTML 中没有文本粘贴。

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

我想看看是否有人对编辑器控件中的水印文本有一个好的解决方案

谢谢！

【问题讨论】：

标签： knockout.js kendo-ui knockout-kendo

【解决方案1】：

这是我实施的解决方案

文本区域

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

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

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

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

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

【讨论】：

【解决方案2】：

@Andrew Walters：感谢您的解决方案。我尝试在 self.BindEditorPlaceholders 下的 .k-content 兄弟上实现焦点和模糊事件处理程序，但使用 Kendo 2014.1.624（测试版）版本时，焦点事件没有为我触发。因此，我想为遇到相同问题的其他人发布替代方案（基于 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);

我并不是说这两种方法哪个更好，对于未来的 Kendo 版本，避免依赖 .k-content DOM 元素的同级位置可能会更好，也可能不会更好。但是，它有效。

【讨论】：