knockout.jskendo-uiknockout-kendo

Kendo-UI Editor Placeholder


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!


Solution

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