TinyMCE Custom Styles not being applied (although technically working)

Question

I have the latest TinyMCE installed (jquery version) on some custom forms I'm working on for a client. I created a custom styles file, and changed the init to point to the correct file (as well as load it where necessary.

The custom styles are correctly loaded with my styles, and they work, except for one thing. When you select unstylized text, and select a style nothing happens at all. No new class is assigned to the text that I've selected (all the custom css is custom classes (with @font-face).

However, if I open the HTML portion of TinyMCE and manually add class="garbage", then try to assign a style, it replaces garbage with the correct class. The text & font updates correctly as well.

It just will not update at all when there is no class already assigned.

Note: Also tried modifying other elements first (making it h1,h2, aligned differently etc..) but it still will not update the class unless I set it to anything manually first.

Hi, I tried a simple CSS on Safari using 3.4.6 TinyMCE and didn't have a problem. Can you provide your TinyMCE config and an example from your CSS I could try. Also, what browser(s) is this occurring on? — Brett Henderson
Sorry for not getting back sooner. It happens in all browsers, the TinyMCE has the default config, and is using jquery. Everything else works except it just doesn't want to insert class="whatever" into the HTML for some reason. The init just looks like: tinyMCE.init({ mode : "textareas", theme : "advanced", content_css : "/fonts.css" The CSS looks like this: @font-face { font-family: "font1"; src: url("/fonts/font1.TTF"); } .font1 { font-family:"font1", Arial, Helvetica, sans-serif; } — Bryant
This is odd as I still can't replicate. I have TinyMCE started using JQuery $('textarea.tinymce').tinymce({ script_url : '../../tinymce/jscripts/tiny_mce/tiny_mce.js', // General options theme : "advanced", ..... }); and using your CSS. I can select either an entire paragraph, or a piece of one and apply the "font1" style from the drop down. In both cases I see class="font1" added to either the Paragraph or SPAN tags appropriately. What version of TinyMCE are you using? Are you able to make a page publicly available that replicates this? — Brett Henderson

Rumen Rumen · Accepted Answer · 2012-02-03T06:51:11

As you are using the jQuery version, I believe your problem will be solved if you initialize and use tinyMCE the jQuery way, like so:

// Initializes all textareas with the tinymce class
$().ready(function() {
   $('textarea.tinymce').tinymce({
      script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js',
      theme : "advanced",
      ...
   });
});

http://www.tinymce.com/wiki.php/jQuery_Plugin

and not the traditional javascript way

<script type="text/javascript" >
tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        ...
});
</script >

TinyMCE Custom Styles not being applied (although technically working)

1 Answers