Kendo-UI Editor Placeholder

Question

I have some Editor boxes that I'd like to add placeholder text to.

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

It looks like the placeholder text tag isn't passed through from the textarea to the editor.

Here's a sample editor box to play with: http://jsfiddle.net/cN2ke/

I think I'll have to listen for the Editor's change event, and if there's no text paste in my watermark HTML.

The problem I have with that is when the page's posted how to strip the watermark's back out. I guess I could do a string compare on the placeholder value but that seems kind of cheesy to me.

Thought I'd check and see if anyone has a good solution for water mark text in an editor control

Thanks!

Answer 1

Here's my implemented solution

Text area

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

In the View Model Create an options variable with the control's Id, observable, and placeholder text

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

On load, I bind to the focus/blur of the editor box. And before posting the form back, I clear out placeholder text from the 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]('');
            }
        }
    };

Answer 2

@Andrew Walters: Thanks for your solution. I tried to implement the focus and blur event handlers on the .k-content sibling, under self.BindEditorPlaceholders, but the focus event did not fire for me using the Kendo 2014.1.624 (beta) release. So, I wanted to post an alternative (based on the Kendo Editor source code) for anyone else experiencing the same issue:

Under self.BindEditorPlaceholders, instead of:

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

one can try:

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

I'm not saying it's the better of the two methods, and it may or may not be better to avoid relying upon the sibling position of the .k-content DOM element, for future Kendo releases. But, it works.