Teléfono y Whatsapp: 675 18 68 80

Permitir que tinymce acepte todas las etiquetas

Tiny MCE es un editor javascript que incluye multitud de opciones y caracteristicas y se usa en CMS profesionales como WordPress, Joomla, Prestashop…etc.
Hay veces que necesitamos introducir contenido HTML al completo (newsletters) pero Tiny MCE está configurado para aceptar determinadas etiquetas para que no afecte a la estructura del sitio donde va a ser insertado el texto.

Toda instancia del editor Tiny MCE, tiene una función inicializadora, inyMCE.init, como por ejemplo esta

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "cirkuit",
 
plugins : "pagebreak,style,table,advimage,advlink,inlinepopups,preview,media,emotions,searchreplace,contextmenu,paste,fullscreen,template",
// Opciones
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,emotions",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
width: "100%",
height: "auto",
font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
elements : "nourlconvert,ajaxfilemanager",
file_browser_callback : "ajaxfilemanager",
entity_encoding: "named",
convert_urls : false,
language : "es",
});

La solución consiste en añadir una simple línea de código en las opciones de configuración Javascript del módulo (entre skin y plugins)

valid_elements : '*[*]',

de tal manera que quedaría:

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
skin : "cirkuit",
valid_elements : '*[*]',					
plugins : "pagebreak,style,table,advimage,advlink,inlinepopups,preview,media,emotions,searchreplace,contextmenu,paste,fullscreen,template",
// Opciones
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,emotions",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,media,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
width: "100%",
height: "auto",
font_size_style_values : "8pt, 10pt, 12pt, 14pt, 18pt, 24pt, 36pt",
elements : "nourlconvert,ajaxfilemanager",
file_browser_callback : "ajaxfilemanager",
entity_encoding: "named",
convert_urls : false,
language : "es",
});

Ahora subimos el fichero al servidor y lo ejecutamos. Veremos como ya deja poner todos los tags XHTML.

Un saludo.

  • David

    Una pregunta… ¿Estás seguro de que permite utilizar la etiqueta ?
    Graacias :)