검도 UI 편집기 자리 표시 자

자리 표시 자 텍스트를 추가 할 편집기 상자가 있습니다.검도 UI 편집기 자리 표시 자

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

자리 표시 자 텍스트 태그가 텍스트 영역에서 편집기로 전달되지 않는 것처럼 보입니다. 나는 편집자의 변경 이벤트를 수신해야합니다 생각 http://jsfiddle.net/cN2ke/

, 내 워터 마크 HTML에는 텍스트 붙여 넣기가 존재하지 않는 경우 :

여기에 재생 샘플 편집기 상자입니다.

내가 가지고있는 문제는 페이지가 워터 마크를 제거하는 방법을 게시했을 때입니다. 내가 자리 표시 자 값에 비교 문자열을 할 수있을 것 같아하지만 그건 내게 치즈 같아 보인다. 내가 확인하고 사람이 편집기 컨트롤에 워터 마크 텍스트에 대한 좋은 해결책

감사가 있는지 것

생각!

출처

2013-07-26 Andrew Walters

여기, 컨트롤의 ID, 관찰 및 위치 지정자 텍스트 부하에

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

와 변수 옵션을 만들기보기 모델에서 내 구현 솔루션

텍스트 영역

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

의 I 편집기 상자의 초점/흐림에 바인딩합니다. 그리고 양식을 게시하기 전에, 나는 관찰 대상에서 자리 표시 자 텍스트를 삭제합니다.

//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

@ 앤드루 월터스 : 솔루션에 감사드립니다. self.BindEditorPlaceholders 아래에서 .k-content 형제에 초점을 맞추고 이벤트 핸들러를 흐리게하려고했지만 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

검도 UI 편집기 자리 표시 자

답변

관련 문제