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, или как я начинал писать сайт




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


Часы на газоразрядных индикаторах ИН-8
Инфракрасный барьер своими руками
Светодиодное освещение - продолжение эволюции
Часы на газоразрядных индикаторах ИН-12 (Nixie Clock)
Светодиодное освещение своими руками



Главная



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


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




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










Мужской Проект

Подписка


Поиск