Собираем
информацию
по крупицам
Статьи - Компьютерное

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.


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

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


Классическая анимация » Прыгающая подушка

Оборудование: Pentium-IV, Wacom Graphire3 CTE-630 Среда: Flash 8 Год: 2005   Первая и, видимо, последняя попытка нарисовать мини-мультфильм по т...


Linux: как перестать удивляться, и начать работать » Как показать иконку Dropbox в систрее в Linux KDE4

Начиная с Dropbox версии 3.x.x, разрабочики этого облачного хранилища забили на поддержку своего детища в Linux. Как результат, появились странные глю...


Скейтбординг » Самодельный слаломный скейт. Часть 1: Введение

В детстве я был счастливым обладателем советского скейта АПОМ, который по нынешним меркам классифицируется как слаломная доска. АПОМ по праву считаетс...

RSS подписка

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

Поделиться этой страницей


Статистика


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

Внимание!


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

 

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

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

База Fadk

 

Требуют доработки:

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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