CKEditor, 자식이있는 사용자 지정 개체

Question

자식이있는 사용자 지정 개체를 추가하는 CKEditor 용 플러그 인을 만들려고합니다.

예 : 된 OnOK 함수에서

<div> 
    <img src="someimage.jpg" /> 
    <p> 
     Some text 
     <span>Some subtext</span> 
    </p> 
    <img src="someStaticImage.jpg" /> 
</div> 

제가있다 :이 블록은 백 스페이스 키를 누르면, 전체 블록을 삭제하는 것을 의미하는 하나의 요소로서 행동 할

---snip--- 
this.imgElement.setAttribute('src',path + data.imageSrc); 
this.staticImgElement.setAttribute('src',path + 'images/staticimg.jpg'); 
this.imgElement.appendTo(this.element); 
this.imgElement.appendTo(this.element); 
this.staticImgElement.appendTo(this.element); 
---snip--- 

내가하고자 더블 그것을 클릭하면 편집 대화 상자가 열립니다 ...

어떻게 할 수 있습니까?

나는 "그"는 ckedit 창에서 첫 번째 요소가 있다면 그러나이, 내용이 "을"전에 삽입 할 수 없습니다

this.element.setAttribute('contenteditable','false'); 

설정을 가진 듯했습니다.

편집 :

더 많은 정보 : 내가 CKEditor 4.0을 사용하고 , 내 "개체"을 기원 인라인 버전 은 "이미지"플러그인, 이미지에 당신을 더블 클릭처럼하려면 대화 상자가 열리 며, 객체를 만들 때와 같은 대화 상자가 나타납니다 (여기서 src, width ...를 설정합니다). 자식 요소가있는 div이기 때문에 CKEditor는 각 부분을 별도로 취급합니다. 따라서 백 스페이스를 사용하여 개체를 삭제하면 부분적으로 만 삭제됩니다 , 전체 개체를 삭제하려면 백 스페이스를 여러 번 눌러야합니다.

Answer 1

나는 CKEditor 핵심 개발자이며, 나는 당신에게 재미있는 소식이 있다고 생각한다. :) 우연히도, 지금 우리는 정확히 당신이 의미하는 것입니다 Widgets feature에 노력하고 있습니다.

페이지의 일부 조각을 contenteditable=false으로 설정하여 편집 할 수 없게 만들 수 있습니다. 선택, 복사 & 붙여 넣기, 오른쪽 클릭, 화살표 키 사용 -이 모든 것은 적어도 부분적으로 손상되었습니다. 중첩 된 편집 가능한 요소 (편집 할 수없는 내부에서 편집 가능)를 추가하려고하면 더 나쁜 것입니다. 그것은 내부에서 삭제 될 수 있습니다.

그래서 우리는 위젯을 만들기위한 멋진 API를 구현하고 모든 버그를 수정하기로 결정한 것입니다. 어쩌면 모든 버그와 처음에는 모든 브라우저에서 볼 수 있습니다. 왜냐하면 거대한 (실제로는 ... 나는 huuuuge : P를 의미합니다.) 양이 많기 때문입니다. 물론 브라우저 간에는 표준적인 동작이 전혀 없었습니다. 그러나 좋은 출발이 될 것입니다. CKEditor 4.2에서 곧 출시 될 위젯의 첫 번째 버전을 사용할 수 있어야합니다. 이것이 우리의 목표입니다. 그런 다음 구현 안정화에 중점을 둘 것입니다.

추신. CKEditor Roadmap은 CKE 4.2가 11 일 만에 준비 될 것이라고 말합니다. 그러나 이것은 불행히도 사실이 아닙니다. 우리는 연기되었지만, 지금은 얼마인지 추산하고 싶지 않습니다.

Answer 2

개체를 처리하는 플러그인을 만들었지 만 해결하려는 문제는 개체가 첫 번째 항목 인 경우 개체 앞에 내용을 삽입 할 수 없다는 것을 나타 냈습니다. 나는 편집기에 코드 블록을 삽입 내 플러그인을 사용 Can't move cursor behind non-editable element (or placeholder) in CKEditor

가 :

<div contenteditable="false"> 
     <img src="someimage.jpg" /> 
     <p> 
      Some text 
      <span>Some subtext</span> 
     </p> 
     <img src="someStaticImage.jpg" /> 
    </div> 

당신은 또한 display: inline-block; 스타일을 추가 할 수 있습니다 그것은이 버그 리포트처럼 보이는

이 문제에 관한 것입니다 원하는 경우 (아래 설명 참조) :

내 테스트 결과, 백 ar을 사용하여 개체 앞에 내용을 넣을 수없는 것 같습니다. 행을 추가 할 수 있지만 해당 행의 화살표를 뒤로 이동하고 홈 키를 누르면 개체 앞에 입력 할 수 있습니다. 왼쪽 상단 모서리에서 마우스로 클릭하면 객체 앞에 내용을 추가 할 수도 있습니다.

두 방법 모두 <div>이기 때문에 개체를 다음 줄로 밀어 넣으므로 개체를 첫 번째 행에 머물게하려면 div 스타일을 display: inline-block;으로 변경할 수 있습니다. 대신 객체 <div>을 <span>으로 만들었지 만 객체의 일부를 편집 할 수있게되었습니다.

백 스페이스을 사용하여 개체를 삭제할 수는 없지만 개체를 ​​클릭하여 선택한 다음 삭제할 수 있습니다.

내가 구글 크롬은 문제의 무리가 승리 7. 파이어 폭스 (20)와 IE 9 위에서 설명한 정보 확인 : HTML의 블록이 플러그인 삽입되면
의 contenteditable="false" 속성이 밖으로 제거됩니다.

소스 모드에서 CkEditor에 해당 블록 블록을 붙여 넣으면 어떻게 작동하는지 보려고했습니다. contenteditable="false" 속성은 제거되지 않았지만 전체 컨텐트 영역은 편집 할 수 없게되었습니다.

내 테스트에서 CkEditor 3.6.1을 사용 중이므로 CkEditor 4.X에서 문제가되지 않을 수 있습니다. 정보
여기
ContentEditable, Image and Chrome

추가 :

이 버그 보고서는 내가 크롬을 사용하여 콘텐츠 영역에서 아무것도 할 수없는 존재로 발생하는 문제에 대해 것 같다,이 보고서는 버전 3.x를 나타냅니다 도움이 될 수 CKSource에서 플러그인 :
Magic Line

설명 :
이 플러그인은 당신이 할 수있는 C 일반적으로 도달 할 수없는 곳에 새로운 단락을 공간으로 재연하십시오. 예를 들어, 문서 맨 앞에있는 표 위에 있습니다.

---

여기 에디터에 내용을 삽입 내 플러그인, 그것은 당신이 가진 문제가 해결되지 않습니다,하지만 당신은 플러그인에 기능을 추가하는 데 사용할 수 있습니다. 나는 플러그인을 만들지 않은 사람이 이것을 발견하고 그것을 시도하고 싶을 경우를 대비하여 모든 지침을 쓸 것이다. 여기

은 ckeditor/plugins/cwmarinsertsnippet/plugin.js 파일에 들어가는 코드입니다 :

/** 
* Plugin to insert the contents of an element into the editor content area. 
*/ 

// Register the plugin with the editor. cwmarinsertsnippet 
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html 
CKEDITOR.plugins.add('cwmarinsertsnippet', 
{ 
    // The plugin initialization logic goes inside this method. 
    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init 
    init: function(editor) 
    { 
     // Define an editor command that grabs the content of an element and inserts it into the content area. 
     // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand 
     editor.addCommand('cwMarInsertSnippet', 
    { 
     // Define a function that will be fired when the command is executed. 
     // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.commandDefinition.html#exec 
     exec : function(editor) 
     { 
     // Create an element based on a native DOM element. 
     var codesnippet = new CKEDITOR.dom.element(document.getElementById('resmar')); 
     //alert(codesnippet.getHtml()); 

     // Insert the element content into the document. 
     // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml 
     editor.insertHtml(codesnippet.getHtml()); 
     } 
    }); 

     // Create a toolbar button that executes the plugin command. 
     // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton 
     editor.ui.addButton('CwMarInsertSnippet', 
     { 
      // Toolbar button tooltip. 
      label: 'Insert Search Box', 
      // Reference to the plugin command name. 
      command: 'cwMarInsertSnippet', 
      // Button's icon file path. 
      icon: this.path + 'images/buttonicon.gif' 
     }); 
    } 
}); 

그것은으로 설정 파일에 추가해야합니다

---

:

config.extraPlugins = 'cwmarinsertsnippet'; 

와 버튼을 볼 수 있도록하기 위해, 버튼 이름 "CwMarInsertSnippet"을 설정 툴바 항목에 추가해야합니다 :

CKEDITOR.config.toolbar_XXXX 
    [ 
Snip... 
    { name: 'tools',  items : [ 'About','CwMarInsertSnippet' ] }, 
... End Snip 
    ]; 

플러그인의 버튼은 13px X 13px (CkEditor 3.X의 경우 버전 4.X에 대해서는 확실하지 않음) 여야합니다. 그것은 여기에 배치됩니다 : (이 경로는 정말 어디서든 당신이 원하는 수 있습니다)
ckeditor/플러그인/cwmarinsertsnippet/이미지

이름은 플러그인 코드의 끝에서 editor.ui.addButton 기능에 사용 된 것과 일치해야합니다.당신이 원하는 경우

<div id ="resmar"> 
    <div contenteditable="false"> 
     <img src="someimage.jpg" /> 
     <p> 
      Some text 
      <span>Some subtext</span> 
     </p> 
     <img src="someStaticImage.jpg" /> 
    </div> 
</div> 

당신은 또한 display: inline-block; 스타일을 추가 할 수 있습니다 : 여기

---

는 CkEditor 사용중인 페이지에 추가 할 수있는 코드의 예

<div style="display:inline-block" contenteditable="false"> 

컨테이너 요소는 페이지에 나타나지 않아야 스타일링으로 숨길 수 있습니다.

기본적으로, 당신이 원하는 무엇이든 할 수있다 대상 ID 물론

<div id ="resmar"> 
    Content to be inserted. 
</div> 

---

플러그인 이름과 요소 ID와 요소 내부에 삽입 할 내용을 넣어.