php - ejemplos - wysiwyg editor free

El complemento de "codeample" de tinymce ejecuta la etiqueta HTML

Question

Estoy usando el complemento codeample de tinymce que se menciona aquí https://www.tinymce.com/docs/plugins/codesample/ en mi portal personalizado.

Todo funciona bien, hasta que tengo que "reeditar" los datos almacenados en la base de datos.

Cuando voy a editar, todos los datos almacenados en la base de datos dentro de

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

es despojado y se muestra como única

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

cuando se ve desde "Herramientas> Fuente"

Ya estoy usando "htmlentities" en mi área de texto como: -

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

Todavía elimina toda la etiqueta html utilizada dentro de la etiqueta creada por el complemento de codesample de codesample .

Preguntas frecuentes: 1. Al agregar datos por primera vez, todo funciona bien. 2. El problema es solo cuando voy a editar la página. Tinymce elimina solo el código HTML del complemento de código de codesample . El resto del código que se ha agregado usando código de muestra como "css, python, php", etc., se muestra en el editor.

Answer 1

La forma correcta de insertar datos en tinymce no sería imprimirlos o incluso usar htmlentities . Considere el siguiente código

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

y el archivo content.php debería simplemente imprimir el contenido html

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

note la función en init_instance_callback mientras inicializo tinymce. Esa es la función llamada después de que se inicializa tinymce. Ahora, en lugar de utilizar directamente print dentro del editor, realice una llamada ajax dentro de init_instance_callback y la represente allí. He puesto una línea comentada de muestra solo para ayudarte con lo mismo. Esto también se hará cargo de la validación de seguridad (no se ejecutará la etiqueta de script, si la hay)

También al mismo tiempo para obtener los contenidos del editor mientras se guarda en la base de datos es

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

Y luego puede hacer una solicitud de publicación ajax para guardar datos en la base de datos.

Ahora por qué estoy usando ajax es importante. Probé un montón de otros métodos en los que podía salir imprimiéndolo directamente. Pero eso causa una falla de seguridad, ya que las etiquetas de secuencia de comandos podrían ejecutarse antes de que se inicialice el editor.

Utilicé div en este ejemplo, pero sería lo mismo incluso para el área de texto. Además, no use htmlentities porque eso evitaría el contenido html y desea ver el contenido representado en tinymce y no en la versión con escape.

Answer 2

Lamento decirlo, pero encuentro a TinyMCE demasiado complicado al tratar con el "código". Yo aguanté los numerosos & nbsp; que aparecen en todas partes, pero he recurrido a solo agregar imágenes para fragmentos de código o enlazar a una ventana emergente modal.

Answer 3

Ok, después de mucha investigación, encontré que es un problema de codificación. Es necesario codificar cada entidad como: - < , > a < , > .

Y & carácter dentro de la etiqueta <code> a & , que significa < dentro de la etiqueta <code></code> convierte en < .

Por lo tanto, código como abajo: -

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

debe ser como

<pre><code><html> <p>Text</p> </html> </code></pre>

Así que, para todos los usuarios que estén encontrando solución. Esta es la solución.

Recuerde, & dentro de <code> &amp;lt; </code> <code> &amp;lt; </code> etiqueta <code> &amp;lt; </code> solo debe convertirse a & . Aviso < dentro de la etiqueta <code> es <

Aclamaciones

Answer 4

Use la función setContent para agregar el contenido una vez que se haya cargado 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);
    });
}

Fuente: las etiquetas se eliminan al usar el complemento de Codesample con TinyMCE