Bold & italics buttons don't use strong and em

Is this a Drupal tinymce issue or a Moxie tinymce issue? Either way it is an issue - those tags are depreciated. Drupal does a good job of creating valid html so if tinymce cannot, that is a big reason to not use it.

TinyMCE can be modified to use strong and em, but Drupal doesn't allow me to upload that configuration change to CVS in a way that would be useful. I will be releasing a version of the module and a Drupal customized TinyMCE code outside of the Drupal.org's CVS which will solve this problem.

if you do release such a version please post a link for us other poor souls to get it ;-)

Isn't it simpler (i.e. let them do all the work!) to take this issue to the guys that maintain the tinymce editor? Or is there some reason they still want to maintain support for 'b' and 'i' tags? Even so, they could probably create a configuration setting to switch between those tags and the proper ones, no?

Either way it is an issue - those tags are depreciated.

Since when? AFAIK they are certainly not depreciated. There's a lot of debate of which is more correct to use, but they are all valid. There's even a discussion about this in the TinyMCE forums over att Moxiecode:

http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=8086

My mistake - I stand corrected. <b> & <i> are not depreciated, yet. They are in disfavor and are not in the proposed 2.0 spec. But as indicated they are in the html 4.01 created in 1999. Plus it should be mentioned that using non-semantic tags, when there are semantic alternatives will not only effect accessibility but also future support and possibly search engine indexing.

So hmmm, I'll reaffirm my position that if Tiny_mce cannot create the preferred semantic xhmtl and future oriented xhmtl nor provide any configuration options to do so, is it really a good choice for a wysiwyg editor for Drupal? Certainly it is a strike against it in my mind.

Refs:
http://www.w3.org/WAI/GL/WCAG20/wcagtech020320.html#text
http://www.w3.org/TR/2004/WD-xhtml2-20040722/elements.html

This "issue" has been around http://drupal.org/node/20478">since 2005. At least BrianH recognized that this is "Not an issue with tinymce.module as such but more with TinyMCE itself."

If you'd read Moxiecode's wiki, you can enable any valid, depreciated, or made up HTML element you'd like. You can also create your own TinyMCE pluginsto add a strong and em buttons. The fact that no one has done this yet leads me to believe that it isn't really an issue.

Instead of pointing out the "strike against" something other people have worked very hard to get to this point, why don't you work through Moxiecode's Documentation for Creating a Plugin and create customized versions of the bold and italic buttons?

because creating em- and strong-tags should nowadays be the default and not the task of a plugin?

I'd appreciate to get some progress feedback on this - maybe the folks at Moxiecode can give us some hints we haven't yet been thinking about ;-)

Hello friends, I too have encountered this problem whilst using the TinyMCE WYSIWYG module on the Drupal CMS. I am happy to say I have found a relatively clean solution by adding a custom filter for TinyMCE.

My first attempt was to modify the actual TinyMCE javascript, which worked for generating the correct HTML... but seemed to break detecting bold and italic formatting when you come back to edit... That is when you selected a bold or italic text, the button did not activate so you had no way of taking off the formatting. With this knowledge that FF would now not be able to detect the em and strong tags around bold and italicized text, I took another approach...

I allow the b and i tags to be written to the database, but then when the text is rendered I pass it through a custom filter to replace them with the correct strong and em tags.

Step 1 - Add custom filter function into your tinymce.module file (basically anywhere inside the file will do)

function tinymce_filter($op, $delta = 0, $format = -1, $text = '') {
  if($op == 'list'){
    return array(0 => t('TinyMCE Filter'));
  }
  else if($op == 'description'){
    return t('Allows TinyMCE\'s formatting to be used.');
  }
  else if($op == 'process'){
    $text = preg_replace('/<i( [^>]*)?>/i', '<em$1>', $text);
    $text = preg_replace('/<\/i>/i', '</em>', $text);

    $text = preg_replace('/<b( [^>]*)?>/i', '<strong$1>', $text);
    $text = preg_replace('/<\/b>/i', '</strong>', $text);
  }
  return $text;
}

Step 2 - Enable the filter for the input type in Drupal admin
1. Administration > Site Configuration > Input Formats
2. Press configure link for Filtered HTML format
3. Checkbox the TinyMCE Filter
4. Press Save Configuration button
5. Press Rearrange tab at the top
6. Adjust the filter weights so TinyMCE Filter is before HTML Filter -- Important! (mine are ordered 0 - URL, 1 - TinyMCE, 2 - HTML, 3 - Line break)
7. Press Save Configuration button

I know it isn't necessarily the perfect solution, but it works and offers the ability for more custom TinyMCE formatting to be easily added if needed. Hopefully it helps someone out.

If it only were that easy.
The generated html for bold and italics seems to be browser dependent.
One of the Mac-Browsers (I think safari) produces span-tags with inline-styles ... :-(

I have found a way to overcome the problem with <b> and <i> in FireFox using the cleanup_callback mechanism of TinyMCE. This means that the tags are converted not only when the form is submitted, but also when the "disable rich-text" link is clicked as well. I think that realisticly MoxieCode should adopt this as a patch to their code, but it works nice as a workaround for now.

Tracking

It is browser depended. I have done some testing on my Mac.
Firefox 2.0.06:

<p>
This is <b>BOLD</b>, and this is <i>italic.</i>
</p>
<p>
&nbsp;
</p>

Opera 9.23:

<p>
This is <strong>BOLD</strong>, and this is <i>italic</i>.
</p>
<p>
&nbsp;
</p>

Firefox 3.0.3:

<p>
This is <span class="Apple-style-span" style="font-weight: bold">BOLD</span>, and this is <span class="Apple-style-span" style="font-style: italic">italic</span>.
</p>
<p>
</p>

--
Stein M. Bjørklund

The patch submitted above works great for me in FF 2.0.0.6

Subscribe to issue.

An additional piece of information: In FF2, the TinyMCE path says "p>strong", but the HTML shows even with full HTML or filtered HTML allowing .

I'll apply the patch. But the demo on the Moxie site generates tags correctly ...

Hmm. Have tested on http://tinymce.moxiecode.com/example_full.php?example=true in OS X. See my prev. tests in this thread http://drupal.org/node/150032#comment-298707 running tinymce as a drupal module. They are not the same... aaargh. Some secret settings we have missed in tinymce?
Firefox 2.0.6

<p>
This is<strong>Bold</strong> and <em>italic</em>.
</p>

Safari 3.0.3

<p>
This is a bold and this is <span class="Apple-style-span" style="font-style: italic">italic</span>.
</p>

Opera 9.23

<p>
This is <strong>bold</strong> and this is <em>italic</em>.
</p>

Perhaps this is a cache issue. In FF2, the B and I buttons now correctly add and remove STRONG and EMPHASIS correctly, one day after the problem surfaced ...

I have done bold with tags in drupal tinymce by overriding the core of tinyMCE (although I don't suggest overriding codes). You should find the file inside your tinymce module in this directory /modules/tinymce/tinymce/jscripts/tiny_mce/themes/simple/editor_template_src.js and then look for line 53 to 56:

Originally it reads:

case "b":
case "strong":
tinyMCE.switchClass(editor_id + '_bold', 'mceButtonSelected');
break;

Change it to the following:
case "b":
tinyMCE.switchClass(editor_id + '_bold', 'mceButtonSelected');
break;
case "strong":

Test it first on your staging and see if it works for you. And make sure to have a back-up for the said.

it looks as though this can be accomplished without having to override core by defining a theme_tinymce_theme in your template.php file and then using the following syntax within your valid elements to force strong and em:

function yourtheme_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {

  if (isset($init)) {
    $init['valid_elements'] = 'em/i,strong/b,...';
  }

  // Always return $init
  return $init;

}

Note the above code is just an example. The syntax according to the Moxicode site is:

strong/b  - use strong to replace b

em/i - use em to replace i

hope this helps!

It might be even simpler...

Set "Verify HTML" to true in the TinyMCE profile and the b/i tags are substituted without any need to amend the theme function or any other code.

I'm now getting strong/em tags in both Firefox and IE.

In case it helps anyone using Safari, I can add that enabling the "safari" plugin for tinyMCE resolves the trouble with strong/em elements being output as span elements with inline styles. As the documentation says it "solves various Safari compatibility issues".

Same with Google Chrome.

Easiest method and works like a charm. Thanks for that, meerkat.

this has just happened to me for the first time on a site where i've never seen the problem before - but i get [b][/b] - not even <b></b>, i've checked my input formats and checked that verify html is set to true, the only way i can get <strong> is if i select filtered html and then i lose my table. i'm using firefox 3.3.6 and probably was upgraded recently, though not sure if that could be connected.

ideas anyone? other than use fck?

The same thing happens with WYSIWYG module. I don't think this is a problem with the module, but with the editor itself. Maybe the latest version started usng B and I tags instead of STRONG and EM again. :/

I'm having the same problem. "Verify HTML" is set to true, but I get [b] and [i] instead of strong and em.

If the problem doesn't get solved, consider the ckeditor-module. Its installation and the extra ckfinder (to upload images through the editor) and ckeditor_link (to suggest nodes instead of hard links) extensions are well documented.

I wrote a little filter module based on #12 above that corrects for TinyMCE adding B and I tags instead of strong and em, and I use this in conjunction with WYSIWYG + TinyMCE. Wonder if it would be useful to include something like this with wysiwyg module?

@applegirl, @Katrina B, Disable the BBCode plugin. It will turn the editor's output into BBCode tags instead of HTML and is not something you need unless you know you need it.

The original issues here are so old that a several new versions of TinyMCE has come out since it was opened. The more recent ones seem to be about having an unnecessary plugin enabled, which is an entirely different subject.

I can not reproduce this problem in any of the browsers mentioned above using either TinyMCE 3.3.9.3 or 3.4b1 when the BBCode plugin has been disabled, regardless of the "Verify HTML" setting.

So, the module created by jenlampton should not be needed. If you're still having issues, please reopen the issue but please specify exactly which version of TinyMCE and Wysiwyg module you are using.

I'm having this problem on all sites running with WYSIWYG version 6.x-2.2 and TinyMCE version 3.2.7. Will try upgrading to a newer version of TinyMCE.

Update: Confirmed - I see strong and em tags using TinyMCE version 3.3.9.2.

Same problem here,
How can anyone use tinyMCE in drupal without hacking the original code? Since 2004 this issue, and still there?

I use CKeditor (Drupal Module) perfectly in 2 sites, but i wanted to test tinyMCE in my other site, but i can't make it work perfectly ( and< I> problem) using the wysiwyg module.

Or i missed somenting in the way?

Thanks!

I found the solution in other open issue in drupal:
http://drupal.org/node/553772

Its a plugin that makes the error show up!

Make sure you don't enable the BBCode option in the Wysiwyg options => PLUGINS

Disable BBCode

Already told you so in #35. ;)
It's not an error if you actually want to use BBCode, such as when using the BBCode->HTML filter from BBCode module.

@#35 TwoD: Hey man just wanted to say thanks. I wondered so much why ONLY bold and italics buttons produced [b] and [i] respectively. In ADDITION to the correctly BOLDed text... Thanks