Вмъкване на контейнери с плъгин 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 е името на класа на фалшивото изображение на Page Break.

person mattalxndr    schedule 27.02.2011

arrow_upward
1
arrow_downward

Може да сте в състояние да използвате ProtectedSource, за да получите това, което искате искам:

Редакторът предлага начин за "защита" на част от източника, за да остане недокоснат, докато редактирате или променяте изгледи. Просто използвайте функцията "FCKConfig.ProtectedSource.Add" в конфигурационния файл.

Но:

Обърнете внимание, че в момента няма начин за „заключване“ на показаното съдържание в редактора. Съдържанието, защитено с ProtectedSource, всъщност ще бъде невидимо по време на редактиране. Може да се използва вместо това, например, за защита на персонализирани нестандартни тагове или скриптове от страна на сървъра. По подразбиране FCKeditor го използва за защита на таговете ‹script› от активиране по време на редактиране.

Може да можете да използвате това заедно с изображение на контейнер:

  • Вашият плъгин добавя както „истинските“ защитени тагове, така и контейнера.
  • Сървърът премахва контейнера и прави нещата с истинския етикет; ако обаче заместителят не е там, но „истинските“ неща са, тогава изтрийте „истинските“ неща.
  • Когато редактирате, сървърът вмъква изображението на контейнера, преди да изпрати нещата до браузъра.

Всичко това изглежда малко заплетено, така че може да е по-добре с по-проста kludge:

  • Приставката просто вмъква изображение на заместител с конкретен class или фалшив атрибут по ваш избор.
  • Променете приставката за изображение, за да игнорирате контейнера.
  • Заменете изображението на контейнера с истинските неща на сървъра.
  • Заменете истинските неща с изображение на контейнер, когато го изпращате обратно към браузъра, когато редактират съдържанието.

Или можете да използвате свой собствен персонализиран маркер (т.е. <dynamicelement>) и след това да използвате ProtectedTags :

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

Това, съчетано с малко CSS за показване на <dynamicelement> добре (да речем някои размери и фоново изображение), може да свърши работа без много мръсни клоджове.

person mu is too short    schedule 27.02.2011
comment
Въпреки че никое от вашите предложения не беше моят отговор, имах нужда от вашия принос, за да стигна докъдето стигнах. Благодаря за вашите предложения. - person mattalxndr; 27.02.2011