TextConvert is exporting HTML and Body tags

144 Views Asked by At

I'm using the TextConverter class to export a TextFlow to HTML and it's exporting HTML and Font tags in the export. Is there a way to prevent this so it only outputs the content without this?

Here is my AS3:

var output:String = TextConverter.export(RichText(textComponent).textFlow, TextConverter.TEXT_FIELD_HTML_FORMAT, ConversionType.STRING_TYPE);

Example output:

<HTML><BODY><P ALIGN="left"><FONT FACE="Arial" SIZE="12" COLOR="#000000" 
LETTERSPACING="0" KERNING="1">Here is some content. 
</FONT></P></BODY></HTML>

Also, isn't valid HTML in lowercase? Update, it looks like it doesn't matter except if you are using XHTML and then it should be uppercase.

It looks like TextFieldHtmlExporter.as is hardcoding in the HTML and BODY tags.

tlf_internal function exportToXML(textFlow:TextFlow) : XML  {
    var html:XML = <HTML/>;

    if (textFlow.numChildren != 0)
    {
        if (textFlow.getChildAt(0).typeName != "BODY")
        {
            var body:XML = <BODY/>;
            html.appendChild(body);
            exportChildren(textFlow,body);
        }
        else
            exportChildren(textFlow,html);
    }

    return html;
}

How would you handle this? Would this work:

exportChildren(textFlow, <root/>);

I want to get rid of that first "FONT" tag because it doesn't reflect the formatting in the RichText component. I'll probably have to rewrite the class since it uses uppercase all over the place.

It looks like I can get export to XML and then get the forth firstChild:

var test:Object = TextConverter.export(RichText(component).textFlow, TextConverter.TEXT_FIELD_HTML_FORMAT, ConversionType.XML_TYPE);

That creates this XML:

<HTML>
  <BODY>
    <P ALIGN="left">
      <FONT FACE="Arial" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="1">
        My text content
      </FONT>
    </P>
  </BODY>
</HTML>

UPDATE:
A very hacky short cut is to get the actual paragraph content not the html wrapper you can use this but it is very fragile:

//layoutOutput += TextConverter.export(RichText(componentInstance).textFlow, TextConverter.TEXT_FIELD_HTML_FORMAT, ConversionType.STRING_TYPE);
var test:Object = TextConverter.export(RichText(componentInstance).textFlow, TextConverter.TEXT_FIELD_HTML_FORMAT, ConversionType.XML_TYPE);
var content:XML = test.children()[0].children()[0].children()[0].children()[0];

if (content) {
    layoutOutput += content.toXMLString();
}

The classes that do the importing and exporting are:

TextFieldHtmlImporter,  TextFieldHtmlExporter

Those classes look pretty easy to modify. You would use this code somewhere in your application:

TextConverter.removeFormat(TextFieldHtmlExporter);
TextConverter.addFormat(MyNewTextFieldHtmlExporter);
1

There are 1 best solutions below

0
1.21 gigawatts On

Here is a simple solution that you can extend and modify.

TextConverter.removeFormat(TextConverter.TEXT_FIELD_HTML_FORMAT);
TextConverter.addFormat(TextConverter.TEXT_FIELD_HTML_FORMAT, flashx.textLayout.conversion.TextFieldHtmlImporter, TextFieldHTMLExporter2, null);

Create the following class, TextFieldHTMLExporter2.as:

package {

    import flashx.textLayout.tlf_internal;
    import flashx.textLayout.conversion.TextFieldHtmlExporter;
    import flashx.textLayout.formats.ITextLayoutFormat;

    use namespace tlf_internal;

    public class TextFieldHTMLExporter2 extends TextFieldHtmlExporter {


        public function TextFieldHTMLExporter2() {

        }


        /**  
         * Exports certain character level formats as a <FONT/> with appropriate attributes
         * @param format format to export
         * @param ifDifferentFromFormat if non-null, a value in format is exported only if it differs from the corresponding value in ifDifferentFromFormat
         * @return XML  the populated XML element
         * @private
         */ 
        override tlf_internal function exportFont(format:ITextLayoutFormat, ifDifferentFromFormat:ITextLayoutFormat=null):XML
        {
            var font:XML = super.exportFont(format, ifDifferentFromFormat);


            if (!ifDifferentFromFormat || ifDifferentFromFormat.fontSize != format.fontSize) {
                font = super.exportFontAttribute(font, "SIZE", format.fontSize);
                delete font.@SIZE;

                font.@style = "font-size:" + format.fontSize + "px";
            }

            return font;
        }
    }
}

The previous class corrects the font size issue. There are many more things that can be updated. If I post the class I'll add a link to it here.

Note:
The font size bug is that it when the text size is 12 px in height, it sets SIZE="12" which is not the same as style="font-size:12px". If you are going to set the SIZE attribute then it needs to be converted to a equivalent value. See this question.