Kendo-UI Editor Placeholder

Question

У меня есть некоторые окна редактора, которые я бы хотел добавить в текст заполнителя.

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

Похоже, текст тега-заполнителя не передается из текстового поля в редактор.

Вот редактор окно образца, чтобы играть с: http://jsfiddle.net/cN2ke/

Я думаю, что я должен буду слушать событие изменения редактора, а если нет вставлять текст в моем HTML водяных знаков.

Проблема, с которой я столкнулся, заключается в том, когда выкладывается страница о том, как удалить водяной знак обратно. Наверное, я мог бы провести сравнение строк по значению-заполнителю, но для меня это кажется дрянным.

Мысль я бы проверить и посмотреть, если кто-нибудь имеет хорошее решение для текста водяного знака в элементе управления редактора

спасибо!

Answer 1

Вот мое реализованное решение

Текстовая область

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

В Модельное Создать опции из переменных с Id, наблюдаемыми и шаблонным текстом элемента управления

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

При загрузке я привязать к фокусу/размытию окна редактора. И прежде чем отправить форму обратно, я очищу текст заполнителя от наблюдаемых.

//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: Спасибо за ваше решение. Я попытался реализовать фокус и размытие обработчиков событий в .k-content sibling, под self.BindEditorPlaceholders, но фокусное событие не срабатывало для меня, используя выпуск Kendo 2014.1.624 (бета). Итак, я хотел вывесить альтернативу (на основе исходного кода Кендо 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); 

Я не говорю, что это лучшее из двух методов, и он может или не может быть лучше, чтобы не полагаться на позиции родного брата в .К-контента DOM элемента для будущего кендо релизы. Но это работает.