tinymce «codeample» плагин выполняет HTML-тег

Question

tinymce «codeample» плагин выполняет HTML-тег

Я использую плагин CodeSample Tinymce, который упоминается здесь https://www.tinymce.com/docs/plugins/codesample/ в моем пользовательском портале.

Все работает нормально, пока мне не придется «заново редактировать» данные, хранящиеся в базе данных.

Когда я иду на редактирование, все данные хранятся в базе данных в

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

раздет и показан как только

<pre><code>Text </code></pre>

при просмотре из «Инструменты> Источник»

Я уже использую «htmlentities» в моей текстовой области, как: —

<textarea><?php echo htmlentities($content); ?></textarea>

Он по-прежнему удаляет все HTML-теги, используемые внутри тега, созданного codesample плагин.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ :
1. При добавлении данных в первый раз все отлично работает.
2. Проблема только тогда, когда я иду на страницу редактирования. Tinymce снимает только HTML-код с codesample плагин. Остальной код, который был добавлен с использованием примера кода, такого как «css, python, php» и т. Д., Отображается в редакторе.

16

php tinymce-4 tinymce-plugins

Решение

Другие решения

Хорошо, после долгих исследований я обнаружил, что это проблема кодирования. Нужно кодировать каждую сущность как: < , > в < , > ,

А также & персонаж внутри <code> тег к & , это означает < в <code></code> тег становится &lt;,

Таким образом, код, как показано ниже:

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

должно быть как

&lt;pre&gt;&lt;code&gt;&amp;lt;html&amp;gt; &amp;lt;p&amp;gt;Text&amp;lt;/p&amp;gt; &amp;lt;/html&amp;gt; &lt;/code&gt;&lt;/pre&gt;

Итак, для всех пользователей, которые находят решение. Это решение.

Помните, & внутри <code> &lt; </code> тег должен быть преобразован только в & , уведомление < внутри <code> тег &lt;

ура

3

использование setContent Функция добавления контента после загрузки TinyMCE:

setup: function (editor) {
editor.on('init', function () {
var theContent = '<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>';
this.setContent(theContent);
});
}

Источник: Теги удаляются при использовании плагина Codesample с TinyMCE

0

Извините, но TinyMCE слишком запутан в работе с «кодом». Я мирился с многочисленными & n b s p; которые появляются повсюду — но я прибегаю к простому добавлению изображений для фрагментов кода или ссылок на модальное всплывающее окно.

0

Источник

Accepted Answer

Правильный способ вставить данные в tinymce — это не распечатать их или даже не использовать htmlentities, Рассмотрим следующий код

<div class="editor" id="editor">
</div>
<script>
tinymce.init({
selector: 'div.editor',
theme: 'inlite',
plugins: 'image table link paste contextmenu textpattern autolink',
insert_toolbar: 'quickimage quicktable',
selection_toolbar: 'bold italic | quicklink h1 h2 h3 blockquote',
inline: true,
paste_data_images: true,
automatic_uploads: true,
init_instance_callback : function(ed) {
// ed.setContent("<h1>Title</h1><p>Content...</p>");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
ed.setContent(xhttp.responseText);
}
};
xhttp.open("GET", "content.php", true);
xhttp.send();
},
content_css: [
'//www.tinymce.com/css/codepen.min.css'
]
});
</script>

и файл content.php следует просто напечатать HTML-контент

<?php
$content = ''; // Fetch from database
print $content;
?>

обратите внимание на функцию в init_instance_callback пока я инициализирую tinymce. Это функция, вызываемая после инициализации tinymce. Сейчас скорее что напрямую использую print внутри редактора сделайте ajax-вызов внутри init_instance_callback и сделать это там. Я вставил образец строки с комментариями, чтобы помочь вам с тем же. Это также позаботится о проверке безопасности (без выполнения тегов скрипта, если таковые имеются).

Также в то же время, чтобы получить содержимое редактора при сохранении его в базе данных

var content = tinyMCE.get('editor').getContent();

И тогда вы можете сделать ajax post запрос на сохранение данных в базу данных.

Теперь, почему я использую AJAX, важно. Я перепробовал много других методов, где я мог бы распечатать его напрямую. Но это вызывает недостаток безопасности, так как теги сценария могут выполняться до инициализации редактора.

Я использовал div в этом примере, но он был бы одинаковым даже для текстовой области. Также не используйте htmlentities, потому что это ускользнет от html-контента, и вы хотите видеть контент, отображаемый в tinymce, а не в экранированной версии.

5