Tinymce "codeample" плагин выполняет HTML-тег

Я использую plug-а-код plugin 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" и т.д., Отображается в редакторе.

Ответ 1

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

И & символ внутри тега <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;

Приветствия

Ответ 2

Правильный способ вставки данных в 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 и отрисуйте его там. Я поставил образец прокомментированной строки, чтобы помочь вам с тем же. Это также позаботится о проверке безопасности (при отсутствии тега script).

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

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

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

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

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

Ответ 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

Ответ 4

Извините, но TinyMCE слишком запутан в работе с "кодом". Я мирился с многочисленными & NBSP; которые появляются повсюду - но я прибегаю к простому добавлению изображений для фрагментов кода или ссылок на модальное всплывающее окно.