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> в зависимости от языка.
Dr. Spear, 2014-11-20 22:07:28
Еще статьи по теме
• Mysql. Нюанс работы с BLOB полями
• Антиспам для комментариев, или как обойтись без капчи
• Tinymce. Вставка видео на сайт
• Особенности моей CMS, или как я начинал писать сайт
Свежие статьи
• Как сделать аппаратное сцепление
• Педали для компьютера своими руками со сцеплением
• Коробка передач для ПК своими руками
• Светодиодный фонарик своими руками
• Лабораторный блок питания на LM317 LM337 с предрегулятором
Главная
Комментарии (2)
==============================
Александр, 2016-07-14 15:44:29
Рубрики
Поиск
Антон, 2015-02-03 23:22:33