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

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

Интерфейс

В настоящее время плагин вставляет следующий 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">).

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

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

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


javascript html dom wysiwyg fckeditor
person mattalxndr    schedule 27.02.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

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

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

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

person mattalxndr    schedule 27.02.2011

arrow_upward
1
arrow_downward

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

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

Но:

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

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

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

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

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

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

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

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

person mu is too short    schedule 27.02.2011
comment
Хотя ни одно из ваших предложений не было моим ответом, мне нужно было ваше мнение, чтобы добраться до того, что я получил. Спасибо за ваши предложения. - person mattalxndr; 27.02.2011