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

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.


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

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


Игры под Windows » Shareholder (Акционер)

Игра, написанная вместе с Сергеем Шпаковым. Разработка застыла на этапе глубокой беты. Шпаков сделал интерфейс и хотсид, я писал искуственный интеллек...


Юмор » ЛОР. Призрак в опере? Нет проблем, обеспечим!

Да! ЛОР снова торт. Если кто еще не знает, 9 октября 2011 года усилиями однозвёздного пользователя bk_ стартовала Гитарная Битва Луноходов.   На...


Flash-анимация » Клип клуба "Сакура"

Оборудование: Pentium-200MMX, RAM 32Мб Среда: Flash MX Год: 2002   Этот клип я создавал, преследуя две цели.   Первая цель - разобраться с ...

RSS подписка

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


Сайта требования к уведомлению о контролируемых сделках ibfsunited.com.

Внимание!

На этом сайте разрабатывается программа 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
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик