Kendo-UI Editor佔位符

我有一些編輯框，我想添加佔位符文本。Kendo-UI Editor佔位符

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

它看起來像佔位符文本標記沒有從textarea傳遞到編輯器。

下面是一個示例編輯框一起玩：http://jsfiddle.net/cN2ke/

我想我得聽編輯的變化事件，如果有一個在我的水印HTML沒有文本粘貼。

我遇到的問題是當頁面發佈如何去掉水印的時候。我想我可以做佔位符值的字符串比較，但對我來說似乎很俗氣。

想我會檢查，看看是否有人在編輯器控制水位標記文本很好地解決

謝謝！

來源

2013-07-26 Andrew Walters

這裏是我實施的解決方案

文本區域

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

在視圖模型創建控件的標識，觀察到的，和佔位符文本

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-29 16:25:21

@Andrew Walters：謝謝你的解答。我試圖在.k-content兄弟上執行焦點和模糊事件處理程序，在self.BindEditorPlaceholders下，但是使用Kendo 2014.1.624（測試版）發佈時，焦點事件並未激發我。所以，我想後爲別人遇到相同問題的替代方案（基於劍道編輯器源代碼）：

在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-內容DOM元素的兄弟地位，爲未來的劍道釋放。但是，它的工作。

來源

2014-07-06 13:37:46

Kendo-UI Editor佔位符

回答

相關問題