MyTetra Share
Делитесь знаниями!
О, смотри-ка какое хорошее место. Дайте два!
Как в TinyMCE сделать отображение HTML-кода (заготовка статьи)
27.06.2016
16:52
Раздел: Компьютер - Программирование - Java Script

Многие, кто пытается пользоваться редактором 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.

Так же в этом разделе:
← Содержание ...
 
MyTetra Share v.0.35
Яндекс индекс цитирования