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.
Últimos comentarios