tinyMCE to AS3 htmlText

Question

I'm using tinyMCE to edit/markup text in a Zend Framework backend. I'd like to use the generated HTML in a Flash AS3 Application. The problem is that Flash doesn't support attributes in <span>'s, <em> tags, <strong> tags etc. I guess there are two possibilities here:

• change the tinyMCE config so it uses font-tags instead of span's, <b> instead of <strong>,...
• Replace all the HTML-tags in Flash with Regex.

Any help would be welcome.

so this is the original html generated by tinyMCE:

<span style="color:#FF0000; font-size:24;">text, and <strong>bold text</strong></span>

And this is what I need in Flash:

<font size='24' color='#FF0000'>text and <b>bold text</b></font> 

Answer 1

Thanks for the reply but I found a very simple Solution. TinyMCE comes with a plug-in called: legacyoutput. This will generate old-school HTML code that's readable in Flash.

how to use this:

• add legacyoutput to your plugins in the tinyMCE init function
• add the following rule to your tinyMCE init function: extended_valid_elements : 'b,i'

Now your HTML will look like this:

<font size="12" style="color:#FF0000"><b>text in bold 14pt red</b></font>

The style attribute should be replaced by a color attribute to make it readable in Flash You can fix this by editing a rule in the legacyoutput js files (tinymce/plugins/legacyoutput/editor_plugin.js and editor_plugin_src.js):

look for "forecolor" and change the code to the following:

forecolor : {inline : 'font', attributes : {color : '%value'}},

Now you can ouput this in Flash witouth using a single hack.

Answer 2

First add the following to your config (this should result in using b-tags instead of strong for bold):

tinyMCE.init({
    ...
    formats : {
          ...
      bold : {inline : 'b'},
          ...
});

You should write an own plugin with the functionality to replaces your spans (using jQuery). The relevant code should look similar to this:

iframe_id = (ed.id == 'content_ifr') ? ed.id : ed.id+'_ifr';
spans = document.getElementById(iframe_id).document.getElementsByTagName('span');

for (i=0;i<spans.length;i++){

  with(document.getElementById(iframe_id).contentWindow){

    var font=document.createElement("font");
    font.innerHTML = span[i].innerHTML;
    font.size = $(span[i]).attr('font-size');
    font.color = $(span[i]).attr('color');
    span[i].parentNode.replaceChild(font, span[i]);
  }
}