2016-08-09 4 views
16

Я использую plug-in-модуль plugin of tinymce, который указан здесь https://www.tinymce.com/docs/plugins/codesample/ на моем заказ портале.tinymce "codesample" plugin выполняет HTML-тег

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

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

<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.

FAQ: 1. При добавлении данных в первый раз все работает нормально. 2. Проблема только в том, что я перехожу на страницу редактирования. Tinymce использует только HTML-код из codesample плагина. Остальный код, который был добавлен с помощью таких кодов, как «css, python, php» и т. Д., Отображается в редакторе.

+1

'htmlentities' не будет иметь никакого влияния на тексте, который уже был преобразован в HTML сущности. Ваша проблема, вероятно, где-то в другом месте. – apokryfos

+1

Как выглядят исходные данные в базе данных? Чтобы установить, изменяется ли это изменение htmlentities при сохранении или восстановлении указанных данных. – Martin

+0

Это именно то, что есть в «инструментах» исходного кода »tinymce. –

ответ

3

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

И & характер внутри <code> тега &amp;, что означает &lt; в <code></code> тег становится &amp;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> &amp;lt; </code> тег должен быть преобразован в &amp;. Примечание&lt; внутри <code> тега &amp;lt;

Приветствия

5

Правильный способ вставки данных в 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 для того чтобы сохранить данные в базу данных.

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

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

+0

Я попытался раньше, обратный вызов экземпляра, но я попробую это после сохранения данных в режиме ajax. –

+0

Он дает ошибку «Недействительный или неожиданный токен» из-за содержания в нескольких строках - как этого избежать? –

+0

@JohnCargo вы можете опубликовать некоторый фрагмент, чтобы я мог лучше помочь :) – georoot

0

Используйте 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); 
    }); 
} 

Источник: Tags Get Removed When Using Codesample Plugin with TinyMCE

+0

не уверен, почему это было отмечено, его действительный подход :) – georoot

Смежные вопросы