44 Votes

TinyMCE should use <b> and <i> instead of <strong> and <em>-tags

Question by Guest | 2014-05-06 at 11:07

Recently, I have installed the HTML Editor TinyMCE. The conversion of my text formatting into appropriate HTML code is working quite good, but there is one exception.

Instead of using the HTML tags <strong> and <em> I would like to have the tags <b> and <i> for text written in bold and italic.

However, unfortunately TinyMCE is even converting my already existing <b> and <i> tags into <strong> and <em> tags.

Is it possible to configure TinyMCE in a way that this is not happening anymore and that <b> and <i> are used by default?

ReplyPositiveNegativeDateVotes
Avatar Stefan Trost
14Best Answer14 Votes

TinyMCE comes with some predefined default formats. The formats for bold and italic text are two of them. However, it is possible to rewrite this defaults when initializing TinyMCE:

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

For this, just define behind "formats", how "bold" or "italic" should be implemented. In your case, this is "b" and "i". More about the TinyMCE formats, you can learn here.

If you would like to make TinyMCE to rewrite your existing HTML code, you can define some rules with "valid_elements". Behind "valid_elements", you can specify those HTML tags that should be allowed in your text. TinyMCE will delete all other tags. If you specify "b/strong" or "i/em" here, TinyMCE will convert all <strong> and <em> tags into <b> and <i> tags. Therefore, in the example above, only the tags <b> and <i> are allowed while <strong> and <em> would be rewritten.
2014-05-06 at 17:36

ReplyPositive Negative
Avatar Guest
00 Votes

Can you please explain where should I put this code? I'm new in programming and it is not all clear for me.

Thanks.
2015-09-08 at 19:23

Positive Negative
Avatar Stefan Trost
-11 Vote

On tinymce.com, you can click on "Installation" where you can find an introduction of how to implement TinyMCE.

In the example there, you can also see a section tinymce.init({ ... }) which you can just replace with the code from my comment.
2015-09-08 at 19:42

Positive Negative
Avatar Guest
77 Votes

I guess it's better to use this:

extended_valid_elements: "i[*],em"

The * means: permisson to use all attributes unless you prefer list any atribute you would like to use.

With valid_elements you invalid all element not in the list [], it's like to say only b, i, strong and em will be allowed.
2016-10-05 at 16:44

Positive Negative
Reply
Reply

Related Topics

TinyMCE Editor not shown after second call

Question | 3 Answers

TinyMCE: Check if TinyMCE is available

Question | 1 Answer

TinyMCE: Do not convert Special Characters to Named Entities

Question | 1 Answer

TinyMCE: Remove TinyMCE Editor from Textarea

Question | 1 Answer

PHP: Remove all HTML Tags from String

Tutorial | 0 Comments

Meta Tags: What are og:title, og:type, og:url and og_image?

Question | 1 Answer

TinyMCE: Only allow specific Formatting and HTML Tags

Question | 3 Answers

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.