CODEWITHSUNDEEP
htmltinymce
Peter Tirrell
Peter Tirrell

Reputation: 3003

TinyMCE custom format breaks ability to set style?

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:

sample\
sample\tiny_mce
sample\tiny_mce\langs
sample\tiny_mce\plugins
sample\tiny_mce\themes
sample\tiny_mce\utils
sample\tiny_mce\license.txt
sample\tiny_mce\tiny_mce.js
sample\tiny_mce\tiny_mce_popup.js
sample\tiny_mce\tiny_mce_src.js
sample\index.html (see code below)

I took the content of the downloaded archive \jscripts* folder and moved it up to the root of my path. My HTML is:

<!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"/>

<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="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>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<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="Save" />
        </p>
</form>

</body>
</html>

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!

Upvotes: 1

Views: 5386

Answers (1)

Jgarib
Jgarib

Reputation: 166

The default behavior of TinyMCE for bold, italic, underline is to use the html entities associated with the formatting. Example: <strong></strong>, <em></em>, and a span with inline style for underline.

It seems the Formats block of code is overriding this action by instead wrapping your selection in a span with a class name defined by the "classes" property.

In order to have your styles render with the formats block as seen above you need to add a style sheet with definitions for .bold, .italic, .underline and so on.

TinyMCE renders its UI on top of a textarea using iframes if I recall correctly so while simply linking a stylesheet will work for your front end, in order for this to show in the edit box you need to link to the stylesheet through the tinyMCE.init() object.

Using your folder structure, add a stylesheet \sample\tiny_mce\style.css, define your styles within, then below the formats block of code add: content_css: "\sample\tiny_mce\style.css". This will load the style sheet into the tinyMCE edit interface and you should then see your style definitions applied.

it should look like:

    ...

    // 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'}
    ],

    content_css : "tiny_mce/style.css"

    ...

Upvotes: 2

Related Questions