tinyMCE to AS3 htmlText
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'&g开发者_运维百科t;text and <b>bold text</b></font>
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.
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]);
}
}
精彩评论