How to change the markup used for the Bold format in the Rich text Editor?

Please see video attach here.

For the past couple of years, it has been driving us crazy wondering where and how the <b> tag came from (we tested it using copy/paste method from Microsoft Word, PowerPoint, etc. both app and online web-based, etc. and so far no luck) and finally found out the main source. We believe it must be the Rich Text Editor.

That video showed how it was converted from <strong> to <b> tag for a very strange reason.

The reason why we chose not to use <b> tag is this (also from Siteimprove, too): The bold tag <b> versus the strong tag <strong> will look exactly the same when viewing the content in a browser but provide a different experience to screen reader users. When something is bolded in a piece of text using the <b> tag, it will come to no benefit for users using screen readers.

I hope this can iron out the bug issue for 5.4 release.

Hi Aaron,

Thank you for letting us know. It may take be possible to configure whether the strong or b tag is used in the tinymce settings, so I will double check on that and get back to you.

Romario Mato
Customer Success Engineer

1 Like

Thank you for your prompt response. Ok, please let me know about the setting. Also, ot always has been <strong> tag as far as I’m concerned. This is the first time I’ve seen <b> tag in rich text editor.

Please let me know. Thanks.

Hello again,

You can add this block to your \rx_resources\tinymce\simple_config.js file to force the bold button to use the “strong” tag.

formats: {bold: {inline : "strong"}},

Let me know if this does not work - there are a few different locations that you can apply this change. Make sure to also clear the browser cache with CTRL + F5 when testing it in CM1.

Romario Mato
Customer Success Engineer

It may actually be better to apply that code from my previous post to the \rx_resources\tinymce\config\customer_config_override.json, as the simple_config.js file may get overwritten after a later upgrade.

img

Romario Mato
Customer Success Engineer

Thank you very much! I will check this out and will let you know.

Hey Mario!

When I updated the new code "formats": { "bold" : {"inline" : "strong"}}, in \rx_resources\tinymce\config\customer_config_override.json. It did not work. It is still showing b tag, not strong tag. This is what I did:

<h2>Strong Tag</h2>
<p><strong>Working</strong></p>

<h2>Bold Tag</h2>
<p><b>Does not convert to Strong Tag</b></p>

I think .json vs .js coding is somewhat different.

Hi Aaron,

I will look into this to see why the formats were not updated and will get back to you as soon as I have more information.

Romario Mato
Customer Success Engineer

Thank you.

When I was testing on tiny.cloud RTE and I noticed it converted B tag to STRONG tag. Wasn’t sure if there’s a code or something that we are missing?

There are certain elements that we are planning to remove due to accessibility issue. They are:

  • h1 tag (reserved for page title, not for rich text editor)
  • u tag (underline b/c it’s confusing to screenreader thinking it’s hyperlinked)
  • b tag to strong tag
  • i tag to em tag

I tried to revise the block_format from this page https://www.tiny.cloud/docs-4x/configure/content-formatting/ and it doesn’t work from updating customer_config_override.json file:

"block_formats": "Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6"

Is this customer_config_override.json the right file to edit? Some worked and some don’t.

There’s another issue - the custom widgets that have RTE in it - it doesn’t show our latest modification, just the default settings. Is there a way to implement the latest modification changes for custom widget RTE, too?

Hi Aaron,

We are looking into this for you. Thank you for your patience.

Romario Mato
Customer Success Engineer

Hi Aaron,

I am just recapping what we have found so far:

The config below includes the options needed to replace the b tag and i tag with strong and em. I understand that in your case, the config is currently not swapping b tags as you wanted, so there may be another setting that is affecting this - we will need to look further into it. This config should also remove the elements you mentioned from the formats menu.

config.zip (749 Bytes)
The enclosed customer_config_override.json file should be placed into this directory:
<CM1-Install>/rx_resources/tinymce/config/

Romario Mato
Customer Success Engineer

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.