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

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.



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

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


Статистика


RSS подписка

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


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