CKEditor, пользовательский объект с дочерними элементами

Question

Я пытаюсь создать плагин для CKEditor, который добавляет пользовательский объект с дочерними элементами.

Пример:

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

В функции OnOK я быть_наст:

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

Я хотел бы, чтобы этот блок вести себя как единый элемент, а это означает, что нажатие Backspace удаляет весь блок, дважды нажатие на это открывает диалог редактирования ...

Любая идея, как я мог это сделать?

Я был близок с установкой

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

Однако это не позволяет содержание быть вставлено перед «ней», если «он» был первым элементом в окне ckedit.

EDIT:

Подробнее: Я использую CKEditor 4.0, рядная версию Я хочу для моего «объекта», чтобы быть похожей на «изображение» плагин, где при двойном щелчке на изображении, открывается диалог, тот же, что и при создании объекта (где вы устанавливаете src, width ...). Мне удалось сделать его похожим на него, но поскольку это div с дочерними элементами, CKEditor рассматривает каждую часть как отдельную, что делает удаление объекта (с обратным пространством) ведя себя по-другому, только его части удаляются , backspace необходимо нажать несколько раз, чтобы удалить весь объект.

Answer 1

Я разработчик ядра CKEditor, и я думаю, что у меня есть интересные новости для вас :). Кстати, прямо сейчас мы работаем над Widgets feature, что и есть то, что вы имеете в виду.

Создание некоторых фрагментов страницы, недоступных для редактирования, путем установки contenteditable=false сделать их непригодными для использования. Выбор, копирование & вставка, щелчок правой кнопкой мыши, с помощью клавиш со стрелками - все это, по крайней мере, частично нарушено. И это еще хуже, если вы попытаетесь добавить вложенный редактируемый элемент (редактируемый внутри не редактируемый), потому что, например, его можно удалить изнутри.

Вот почему мы решили реализовать хороший API для создания виджетов и исправить все эти ошибки под капотом. Возможно, не все ошибки и во всех браузерах в начале, потому что есть огромное (действительно ... я имею в виду huuuuge: P) количество их и, конечно, стандартного поведения между браузерами вообще. Но это будет хорошее начало. Первая версия виджетов, которая будет выпущена в предстоящем CKEditor 4.2, должна быть годной для использования - это наша цель. Затем мы сосредоточимся на стабилизации реализации.

PS. 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; стиль если вы хотите (см. обсуждение ниже):

Из моих тестов кажется, что вы не можете размещать контент перед объектом, используя задний строка, но если вы вернете стрелку в эту строку содержимого и нажмите на главную ключ, вы можете ввести перед объектом. Также кажется, что если вы нажмете мышью в верхнем левом углу, вы можете добавить контент перед объектом.

Оба подхода подталкивают объект к следующей строке, потому что это <div>, вы можете изменить стиль div на display: inline-block;, если вы хотите, чтобы объект оставался в первой строке. Я попытался просто сделать объект <div> a <span> вместо этого, но затем становится возможным редактировать части объекта.

Вы не можете использовать backspace, чтобы удалить объект, но вы можете щелкнуть объект, чтобы выбрать его, а затем удалить.

Я проверил информацию рассмотренную выше с Firefox 20 и IE 9 на Win 7. Google Chrome имеет кучу проблем:
Когда блок HTML вставляется с плагином, атрибут contenteditable="false" удаляется из.

Итак, я попытался посмотреть, как это работает, если я только что вставил этот блок кода в CkEditor в режиме источника. Атрибут contenteditable="false" не был удален, но вся область содержимого стала недействительной.

Мои тесты использовали CkEditor 3.6.1, так что это не может быть проблемой в CkEditor 4.X.

Это сообщение об ошибке, как представляется, о проблеме я столкнулся с невозможностью сделать что-нибудь в области содержимого с помощью Chrome, указывается в сообщении версии 3.X:
ContentEditable, Image and Chrome

Дополнительная информация
Вот плагин от CKSource, которые могут быть полезны:
Magic Line

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

---

Вот мой плагин, который вставляет содержимое в редактор, это не решает проблемы у вас есть, но вы можете использовать его для добавления функциональности вашего плагина. Я напишу полные инструкции, если кто-то, кто не создал плагин, найдет это и хочет попробовать.

Вот код, который идет в 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 в конце кода плагина (этот путь действительно может быть в любом месте вы хотите).

---

Вот пример кода, который будет добавлен к странице, где используется CKEditor:

<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; стиль, если вы хотите:

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

Элемент контейнера может быть скрыт при стилизации, если он не должен отображаться на странице.

В принципе, просто поместите содержимое, которое требуется вставить в элемент с целевым ID

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

---

Конечно название плагина и элемент ID может быть все что угодно.