2013-02-07 5 views
2

저는 일부 프로젝트에서 Kendo-UI 프레임 워크로 작업하기 시작했습니다.이 문제에있어서 문서가 정말 좋지 않습니다. 내 Kendo.Editor 아래에 몇 가지 추가 html (정확한 버튼)을 추가하려고하므로 새 버튼을 만들 때마다 버튼이 표시됩니다. 예를 들어 Extend와 같은 Kendo는 모든 구성 요소에 대해 이러한 기능이 제공됩니다 (더 쉽거나 어렵지만 여전히 가능함).검도 연장 편집기 html

답변

6

그들은 열심히 노력하고 있으며 항상 개선되고 있지만 나는 문서와 품질에 대해 느낀다.

필자는 편집기를 확장 한 최근 경험이 있으며 매우 쉽고 빠릅니다.

편집기를 선언 할 때 도구 속성이 있습니다. 통합 된 도구의 이름을 입력하면 해당 도구가 표시되거나 개체를 전달하여 새 도구를 정의 할 수도 있습니다. 아래는 내 "비디오 삽입"도구를 만든 예제입니다. 이름과 툴팁 속성은 설명이 필요합니다. exec는 버튼을 클릭 할 때 실행되는 함수를 전달하는 속성입니다. 이 예에서 exec는 비디오를 추가하는 로직을 구현하는 사용자 정의 검도 창을 엽니 다. Vimeo 또는 Youtube 중 하나를 선택하고 일반 링크로 붙여 넣은 인터페이스가 있으며 편집기에 삽입 된 비디오를 붙여 넣습니다. 기본적으로 내 창에서 확인을 클릭하면 이벤트가 시작되고, 포함 된 비디오의 마크 업을 처리 한 다음 편집기에서 붙여 넣습니다. 편집기에서 마크 업에 붙여 넣는 방법은 다음과 같습니다 : $ ("# editor"). data ("kendoEditor"). paste (someString); 여기서 someString은 물론 붙여 넣기하려는 항목입니다. 현재 커서가있는 곳이면 붙여 넣기됩니다.

물론 좀 더 강력한 기능을 원한다면 exec 함수 내에 더 복잡한 코드를 추가 할 수 있습니다. 이 경우 비디오 창에 필요한 모든 마크 업을 만들고 무언가를 닫거나 무언가를 모조리 파괴하십시오.

 $("#editor").kendoEditor({ 
      tools: [ { 
       name: "insertVideo", 
       tooltip: "Insert video", 
       exec: function(){ 
        var window = $("#windasd").data("kendoWindow"); 
      window.center().open(); 
        } 

      },'formatBlock', 'bold', 'italic', 'underline', 'createLink', 'unlink', 'insertImage', 'insertUnorderedList', 'insertOrderedList', "justifyLeft", 
      "justifyCenter", 
      "justifyRight", 
      "justifyFull", ], 

     }); 

사용자 지정 아이콘을 원할 경우 몇 가지 CSS를 추가해야합니다. 버튼은 전달한 이름을 기반으로 CSS 클래스를 자동으로 가져옵니다. 이름에 "k-"접두어를 추가하기 만하면 "k-insertVideo"가됩니다. 해당 클래스에 배경 이미지를 추가하면됩니다.

행운을 빌어 요 내 게시물이 도움이되고 복잡한 방식으로 작성된 것은 아닙니다!

+0

'exec'이 내 맞춤 도구에서 작동하지 않습니다. 왜 그 기능을 발동시키지 않는지 아는가? –