1

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

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

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

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

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

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

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

谢谢！

4

2 回答 2

1

@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 元素的同级位置可能会更好，也可能不会更好。但是，它有效。

于 2014-07-06T13:37:46.847 回答
1

这是我实施的解决方案

文本区

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

在 View Model 中使用控件的 Id、observable 和占位符文本创建一个 options 变量

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]('');
            }
        }
    };
于 2013-07-29T16:25:21.870 回答