TinyMCE custom format breaks ability to set style?

2Westies · Oct 9, 2012

I have a textarea that I want to add a simple wysiwyg editor. I chose TinyMCE but don't need all of the options available so I was using a sample from their page (http://www.tinymce.com/tryit/custom_formats.php) that just had the basic simple formatting options I was looking for. The problem I'm having is that with the code below the editor shows up but clicking styles (i.e., Bold, Underline, etc.) doesn't update the window. It appears to update the underlying HTML style (although popping the embedded HTML editor window also doesn't seem to work here), but I don't see a style change. But, if I comment out the "formats: " block, it does work. This was testing on Chrome, Firefox, and IE.I downloaded the tinymce package and have things in a folder like so:\[code\]sample\sample\tiny_mcesample\tiny_mce\langssample\tiny_mce\pluginssample\tiny_mce\themessample\tiny_mce\utilssample\tiny_mce\license.txtsample\tiny_mce\tiny_mce.jssample\tiny_mce\tiny_mce_popup.jssample\tiny_mce\tiny_mce_src.jssample\index.html (see code below)\[/code\]I took the content of the downloaded archive \jscripts* folder and moved it up to the root of my path. My HTML is:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"><head><title>TinyMCE Test</title><meta http-equiv="content-type" content="text/html; charset=utf-8"/><script type="text/javascript" src="http://stackoverflow.com/questions/12802623/tiny_mce/tiny_mce.js"></script><script type="text/javascript">tinyMCE.init({ // General options mode : "textareas", theme : "advanced", plugins : "table,inlinepopups", // Theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,|,table,removeformat,code", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) //content_css : "/js/tinymce/examples/css/content.css", // Style formats style_formats : [ {title : 'Bold text', inline : 'b'}, {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, {title : 'Example 1', inline : 'span', classes : 'example1'}, {title : 'Example 2', inline : 'span', classes : 'example2'}, {title : 'Table styles'}, {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} ], formats : { alignleft : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'left'}, aligncenter : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'center'}, alignright : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'right'}, alignfull : {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'full'}, bold : {inline : 'span', 'classes' : 'bold'}, italic : {inline : 'span', 'classes' : 'italic'}, underline : {inline : 'span', 'classes' : 'underline', exact : true}, strikethrough : {inline : 'del'}, customformat : {inline : 'span', styles : {color : '#00ff00', fontSize : '20px'}, attributes : {title : 'My custom format'}} }});</script></head><body><form method="post" action="show.php"> <p> <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea> <input type="submit" value="http://stackoverflow.com/questions/12802623/Save" /> </p></form></body></html>\[/code\]Any ideas what I'm doing wrong? The example on their site seems to work fine so I'm assuming there's some sort of config problem on my end. Really I'm just looking for a textarea editor that will give me some basic HTML formatting options, I don't even need anything really fancy. Thanks for any help!

TinyMCE custom format breaks ability to set style?

2Westies

New Member