TinyMCE replaces <i> for <em> and <b> for <strong>

Hello all,

Although this is the standard TinyMCE behavior and usually the expected and desired HTML output, I actually need the output to be italic. In Chrome, <\em> is both italic AND bold…

There seems to be a way to prevent this, but I can’t find the init file for TinyMCE.

Hi @ramon,

TinyMCE is initialized in plugins/generic/tinymce/TinyMCEPlugin.inc.php – but are you sure this isn’t something you could also fix via CSS?

Regards,
Alec Smecher
Public Knowledge Project Team

Hello Alec,

Apparently not. I believe it’s a browser rendering issue for <i>, <b>, <strong> and <em> tags.

No matter what I do, <em> comes out bold and italic, but I only need italic. It’s for the reference rules for articles, where semantic is not as important as the visual style (in this case, it would be nice to have both…).

Hi @ramon,

Hmm, I’m surprised to hear that. The bold and italics tags are deprecated, though, so beware what happens when support is dropped.

Regards,
Alec Smecher
Public Knowledge Project Team

Hello Alec,

Are you sure they’ll be deprecated?
<strong> and <em> have different semantic meaning than <b> and <i> tags.

Hi @ramon,

You’re right – see The i, b, em, &amp; strong elements | HTML5 Doctor for a description.

Regards,
Alec Smecher
Public Knowledge Project Team

Hello all,

If anyone has a way for changing TinyMCE’s behavior, please share…
I’ve been unlucky, so far, at trying to change this default behavior…

A few links I found, that didn’t help, unfortunately:

StackOverflow - forum question 1

StackOverflow - forum question 2

TinyMCE configuration

Hello all,
There’s also a little version issue. I just noticed that OJS’s version of TinyMCE (at least what shows up in tiny_mce_src.js) is 3.4.9, from febreuary 23 2012…

Moxicode, developer of TinyMCE has a 4.1.9 version and it also has a JQuery version of it…

Another point is that the Static Pages Plugin has its own tinymce, I believe…

I don’t know if using a CDN is a good choice, but it’s available as well.

Check the download page…

Hi @ramon,

We’ve upgraded TinyMCE to 4.x for release in OJS 3.0 when that’s ready, and moved to composer dependencies instead of buliding the libraries into the git repository directly, which will allow us to more easily stay up to date. We’re unlikely to back-port similar changes to OJS 2.4.x, though.

Regards,
Alec Smecher
Public Knowledge Project Team

Would manually upgrading TinyMCE help?

Hi @ramon,

TinyMCE 4.x isn’t a drop-in replacement – you’d need to do quite a bit of coding to get it working with OJS 2.4.x. If your goal is to get <i> and <bold> working, I suspect it’s a configuration thing rather than a TinyMCE version thing.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi Alec,

My thoughts exactly.
However, the only settings I could find were:

tinymce.init({
  selector: "textarea",
  formats: {
    bold: {inline: 'b'},  
    italic: {inline: 'i'}
  },
  valid_elements: "b,i,b/strong,i/em"
  toolbar: "bold italic underline"
});

I tried several settings, but can’t make it to work. For example, the b/strong and i/em replacement seems unnecessary, but, who knows?

Whenever I add the settings to plugins/generic/staticPages/StaticPagesEditForm.inc.php, the editor disappears…

Hello all,

I finally figured out why my <em> tags were bold: it was the @import rule for Open Sans that was missing some font styles, breaking the CSS and displaying it bold (why, I have no clue…).

So, just to help the unwary, like me:

Add all the required fonts. It raises page load, but…
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300&subset=latin,latin-ext);

Add the font styling as generically as possible, according to font options:

I put these in the body tag style
font-family:‘Open Sans’,Arial,Verdana,Helvetica,sans-serif;
font-width:400;
font-style:normal;

Customize the em (or whatever tag), if necessary…
em {
font-weight:400 !important;
font-style:italic !important;
}

Although, TinyMCE should have an easier way to configure what and how tags work, as <b> and <i> are for styling, and, in this case, should be allowed.