Собираем
информацию
по крупицам

Web - разработка

Как сделать ввод и отображение HTML/XML кода в TinyMCE
15-06-2010
02:35:43

Многие, кто пытается пользоваться редактором TinyMCE в своих проектах, быстро замечают одну неприятную особенность.

К примеру, вы - веб-разработчик или верстальщик, и хотите писать статьи, в которых вам нужно показывать читателям куски HTML/XML кода. И очень быстро выясняется, что написать HTML/XML код в TinyMCE можно. И код даже правильно отсылается через POST на сервер. А вот открыть на редактирование текст, содержащий куски HTML/XML кода, уже нельзя. Весь HTML/XML код, который вы хотели показать читателям, в редакторе исчезнет.

Сейчас я объясню, почему так происходит. Пусть вы пишите статью про стандартную структуру HTML-странички. В "сыром" виде, в котором TinyMCE отсылает данные, такая статья выглядит, например, так:

 

<p><b>Стандартная структура HTML-странички</b></p>
<p>Структура HTML-страницы обычно выглядит так:</p>
<p>
&lt;html&gt;<br />
&lt;head&gt;<br />
... Заголовок ... <br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
... Основной HTML-код ...<br />
&lt;/body&gt;<br />
&lt;/html&gt;
</p>

 

Вроде бы все в порядке. Угловые скобки предствлены XML-сущностями "&lt;" и "&gt;". Если этот код вывести на странице сайта, то все будет правильно показано. Однако, если этот же код открыть в TinyMCE для дальнейшего редактирования, то пользователя будет ждать сюрприз - весь HTML-код, после фразы "Структура HTML-страницы обычно выглядит так", исчезнет.

Грубо говоря, TinyMCE сам себя не понимает. Я долго рылся в документации, пытаясь понять, какой же опцией можно настроить редактор так, чтобы он нормально считывал сущности вида "&lt;" и "&gt;". Складывалось впечатление, что TinyMCE совершенно без разницы, что ему подается "на вход" - настоящий HTML, или оформленный в виде сущностей. Всеравно TinyMCE вначале преобразовывает сущности в символы, и потом работает с полученным HTML-кодом. Я пытался найти опцию, которая отключает такое поведение. Но такой опции нет!

Наконец, после двух недель бессонных ночей, я нашел человека с похожей проблемой. Можно почитать здесь: (англ) http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=9116

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

Вместо

&lt;

 

надо писать:

&amp;lt;

 

Причем, это нужно делать только при "скармливании" текста в TinyMCE. Считав такой код, TinyMCE преобразует его в "&lt;".

Таким образом, когда генерируется страница с TinyMCE, вставляемый в TinyMCE текст должен обрабатываться следущей функцией (PHP):

 

function tinymce_entity_fix($s)
{
  $entity_from=array('&amp;', '&lt;', '&gt;', '&nbsp;', '&quot;');
  $entity_to= array('&amp;amp;', '&amp;lt;', '&amp;gt;', '&amp;nbsp;', '&amp;quot;');
  $s=str_replace($entity_from, $entity_to, $s);
  return $s;
}

 

Обработанный этой функцией текст и нужно вставлять в область редактирования TinyMCE:

echo '<textarea name="text" class="mce">'.
     tinymce_entity_fix($text).
     '</textarea>';

 

Надеюсь, теперь ни у кого не будет проблем с написанием HTML/XML кода в редакторе TinyMCE.


К списку "Компьютерное"

Интересное на сайте


Программирование на C++ и Qt » Как в C++ сделать массив объектов, у которых конструктор имеет аргументы

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


Штучки-дрючки » Самодельный диафильм

Недавно я нашел в чулане диапроектор и коробку с диафильмами, которые много лет назад засунул на самую дальнюю полку. Увидев эти коробки, я тут же всп...


Web - разработка » Kohana 3.x : Валидация данных

Введение   Валидация в Kohana 3.x осуществляется с помощью класса-валидатора, который обрабатывает ассоциативные массивы ключ=>значение. Напри...

RSS подписка

Подпишитесь на новости сайта по RSS


О, смотри-ка какое хорошее место. Дайте два!

Внимание!

На этом сайте разрабатывается программа MyTetra и её родственные проекты.

Доступны к просмотру следующие базы знаний:

База Xintrea (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

 

Подробности на странице MyTetra Share.

 WebHamster.Ru
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик