Home / Posts / Web, PHP, HTML / Tinymce. Вставка примеров кода на страницу html /


Tinymce. Вставка примеров кода на страницу html



 Когда мне первый раз потребовалось вставить пример кода на страницу сайта, всплыл небольшой подводный камень. Оказалось, что редактор Tinymce записывает код в базу в нормальном виде, но при повторном редактировании выводит не код, а его интерпретацию. Ниже, на скриншотах, я показал то, что мы вводим в редактор и то, что редактор показывает при редактировании статьи. 

 Я слышал, что в таких случаях следует использовать теги <pre></pre>, которые объявляют предварительно отформатированный текст. Но применение только последних нужного результата не дало. 

 

    

 

 Оказалось, что перед выдачей на редактирование надо обрабатывать контент функцией htmlspecialchars(). То есть, в том php файле, где происходит редактирование статьи, нужно найти характерные теги <textarea>, к которым и подключается редактор tinymce. Соответственно, первая строчка - то, что и нужно добавить для нормального отображения кода.

 

$textr = htmlspecialchars($row['ftxt']);
echo '<textarea cols="100" rows="28" name ="fulltext" id="edit_tinymce">'.$textr.'</textarea><br>';

 

 Во всех CMS, где используется tinymce, эти строки примерно идентичны, различие лишь в месторасположении файла и именах переменных. Здесь row['ftxt'] - как раз и есть выводимый контент.

 После вышеописанных манипуляций, при редактировании статьи, код будет выводится корректно, как в левом скриншоте.

 Для красивого вывода кода я использую скрипт snippet. Там все подробно описано. Нужно всего лишь подключить файлы скрипта и инициализировать его.

 

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.snippet.css" />
<script>
$(document).ready(function(){
$("pre.htmlCode").snippet("html",{style:"greenlcd "}); // Ищем тэги <pre> с классом "htmlCode" и подключаем к этим элементам стиль greenlcd и обработку html
$("pre").snippet("css",{style:"greenlcd "}); // Ищем тэги <pre>
$("pre.js").snippet("javascript",{style:"greenlcd "}); // Ищем тэги <pre> с классом "js"
});
</script>

 

Единственное, что здесь потребуется изменить - назначить для каждого языка свои стили (greenlcd в данном случае). Затем вставляем в tinymce пример кода, выделяем, выбираем в пункте Paragraph подпункт Pre и в Source Code добавляем класс js или htmlCode: <pre class="js"></pre> в зависимости от языка.

 

 

,






Еще статьи по теме


Mysql. Нюанс работы с BLOB полями
Антиспам для комментариев, или как обойтись без капчи
Tinymce. Вставка видео на сайт
Особенности моей CMS, или как я начинал писать сайт




Свежие статьи


Как сделать аппаратное сцепление
Педали для компьютера своими руками со сцеплением
Коробка передач для ПК своими руками
Светодиодный фонарик своими руками
Лабораторный блок питания на LM317 LM337 с предрегулятором



Главная



Комментарии (2)


Спасибо за статью. Как раз то, что мне надо было.




Антон, 2015-02-03 23:22:33

Для красивого вывода кода я использую скрипт snippet. Там все подробно описано. Нужно всего лишь подключить файлы скрипта и инициализировать его.
==============================

Где почитать про это на понятном языке и доходчиво?



Александр, 2016-07-14 15:44:29









Поиск