0
338
Vistas¿Cómo aplicar estilos TinyMCE al contenido publicado?
Estoy usando el editor TinyMCE en mi aplicación React. Su CSS funciona en el Editor pero no funciona en el contenido publicado.
Estoy renderizando un elemento como este:
<div dangerouslySetInnerHTML={{ __html: article.content }} ></div>Componente de reacción TinyMCE:
<TinyMCE tinymceScriptSrc={ process.env.PUBLIC_URL + "/tinymce/js/tinymce/tinymce.min.js" } onEditorChange={log} init={{ height: 500, plugins: "preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons", menubar: false, toolbar: "undo redo | bold italic underline strikethrough h2 h3 h4 link codesample align fontselect fontsizeselect formatselect outdent indent preview fullscreen forecolor backcolor removeformat emoticons", }} />Al usar el Editor:
y su salida como esta en la página de destino:
¿Cómo puedo hacer esto? Leí su documentación pero no pude encontrar nada al respecto. Gracias.
1 Respuestas
Responde la pregunta0
Parece que está utilizando el complemento codesample basado en sus capturas de pantalla. En ese caso, debe incluir un resaltador de sintaxis junto con su contenido publicado para que se vea similar a como se muestra dentro de TinyMCE. La documentación de TinyMCE tiene detalles sobre cómo hacer esto usando Prism.js aquí: https://www.tiny.cloud/docs/plugins/opensource/codesample/#usingprismjsonyourwebpage
Básicamente, debe asegurarse de que tanto la hoja de estilo/secuencia de comandos prism.css como prism.js se incluyan junto con su contenido publicado (ya sea en un paquete o como recursos externos). Mientras usa React, es posible que también deba configurar un gancho de efecto para activar el resaltado de sintaxis de esta manera:
useEffect(() => { Prism.highlightAll(); }, []);