Вставка «заполнителей» с помощью плагина FCKeditor, который впоследствии будет заменен динамическим контентом - PullRequest
Новая
       50

Вставка «заполнителей» с помощью плагина FCKeditor, который впоследствии будет заменен динамическим контентом

1 голос
/ 27 февраля 2011

Я пишу плагин для FCKeditor, который предназначен для вставки заполнителей для динамического контента в HTML.Интерфейс выглядит следующим образом:

Interface

В настоящее время плагин вставляет следующий HTML-код: 

<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar">&nbsp;</div>

Фрагмент Javascript в моем плагине, который выполняет фактическийвставка этих заполнителей такова: 

function insertNewDiv() {
    var divNode = oEditor.FCK.EditorDocument.createElement('div');
    oEditor.FCK.InsertElement(divNode);
    oEditor.FCK.Focus();
    oEditor.FCK.Events.FireEvent('OnSelectionChange');
    return divNode;
}

Чтобы это выглядело хорошо в окне FCKeditor, я применяю немного CSS к окну FCKeditor, включая следующее, которое записывает заголовок там: 

.dynamicelement:before {
    content: attr(title);
}

В любом случае, кроме стиля, FCKeditor обрабатывает эти элементы div не иначе, как любой другой элемент div в своем окне.Это не хорошо для меня.

Мне нужно, чтобы эти заполнители имели следующие характеристики:

  • Не допускается вставка содержимого в заполнитель.
  • Нажатие должновыберите его в целом.
  • Нажатие клавиши удаления, когда она выбрана, должно удалить ее.
  • Единственный способ отредактировать ее (кроме удаления) - выбрать ее, а затем нажать кнопку на панели инструментов, чтобы открыть диалоговое окно редактирования..
  • Его всегда следует рассматривать как элемент уровня блока
  • . Не имеет значения, использует ли вывод HTML пользовательское имя тега или нет (<dynamicelement> вместо <div class="dynamicelement">).

Предоставляет ли API-интерфейс FCKeditor способ дать ему команду, например: "Обработать каждый элемент, соответствующий селектору div.dynamicelement", следующим образом: ... "?

Кроме того, есть ли другой плагин FCKeditor, который делает похожую вещь, на которую я могу сослаться, которую я мог упустить из виду в своем исследовании?

РЕДАКТИРОВАТЬ: Кстати, я уже знаю о CKeditor.Я использую FCKeditor по нескольким причинам: он работает для моей CMS, параметры конфигурации, которые я использую, идеально подходят для моих клиентов (кроме, очевидно, для вещи-заполнителя) и т. Д.

Ответы [ 2 ]

4 голосов
/ 27 февраля 2011

Я решил эту проблему, продублировав код, который заставляет работать кнопку «Разрыв страницы».

При просмотре исходного кода я узнал, что в FCKeditor есть встроенный метод для вставки заполнителей.

  1. Создайте «поддельное изображение» и вставьте его в редактор DOM. Вы можете стилизовать изображение как хотите.
  2. Используя Javascript, подключите его к рассматриваемому div.
  3. Скрыть div (хотя он все еще появляется в источнике и в вашем выводе).

В режиме WYSIWYG вы играете с этим поддельным изображением, и изменения переносятся на div.

Есть несколько кусочков, которые должны быть в плагине, чтобы это работало. Если вы grep для FCK__PageBreak, вы найдете их все в источнике, готовом для копирования в ваш плагин. FCK__PageBreak - имя класса поддельного изображения Page Break.

1 голос
/ 27 февраля 2011

Вы можете использовать ProtectedSource , чтобы получить то, что вы хотите:

Редактор предлагает способ «защитить» часть источника, чтобы она оставалась нетронутой при редактировании или изменении представлений. Просто используйте функцию «FCKConfig.ProtectedSource.Add» в файле конфигурации.

Но:

Обратите внимание, что в настоящее время нет способа "заблокировать" отображаемый контент в редакторе. Содержимое, защищенное ProtectedSource, будет фактически невидимым во время редактирования. Вместо этого его можно использовать, например, для защиты нестандартных тегов или сценариев на стороне сервера. По умолчанию FCKeditor использует его для защиты тегов от активации во время редактирования.

Возможно, вы сможете использовать это вместе с изображением-заполнителем:

  • Ваш плагин добавляет как "настоящие" теги защиты, так и заполнитель.
  • Сервер удаляет заполнитель и делает что-то с реальным тегом; однако, если заполнитель не существует, но «реальный» материал, то удалите «реальный» материал.
  • При редактировании сервер вставляет изображение заполнителя перед отправкой в ​​браузер.

Все это кажется немного запутанным, так что вам может быть лучше с более простым клуджем:

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

Или вы можете использовать свой собственный тег (т. Е. <dynamicelement>), а затем использовать ProtectedTags:

Во многих ситуациях важно иметь возможность переключиться на исходный вид в FCKeditor и добавить несколько пользовательских тегов, необходимых для пользовательской обработки или чего-либо еще. Проблема заключается в том, что браузеры не знают, как обрабатывать нестандартные теги HTML, и обычно ломают дерево DOM при их поиске (особенно IE).

Это в сочетании с некоторыми CSS для отображения <dynamicelement> красиво (скажем, некоторые размеры и фоновое изображение) может добиться цели без слишком много грязных путаницы.

...