JavaScriptまたはjQueryを使用してFlex TextFlowオブジェクトをHTMLマークアップに変換する方法

Question

JavaScriptでReactJSとリッチテキストを使用してAdobe Flexアプリケーションを再作成しています。アプリに表示されるコンテンツは、Adobe Text Layout FrameworkのTextFlowオブジェクトの形式です。これは、次のような出力を生成します

<TextFlow> 
    <p textAlign="center"> 
     <span color="#58595b" fontFamily="SansSerif" fontSize="16" fontStyle="normal" fontWeight="bold">Lorem Ipsum</span> 
    </p> 
</TextFlow> 

私はTextFlowオブジェクト内のすべての要素を反復処理し、通常のHTMLマークアップにすべてを変更するJavaScriptのスクリプトを記述する必要があります。私はこれが私に、例えば、fontFamilyと一致するすべての属性を見つけて、style="font-family:"に変更する必要があると想像することができますが、それから値を取得して最後に追加する必要があります。どのようにこれについて行くと私は本当に誰かが私がこれを達成するかもしれないと正しい方向に私を指すことができることを願っています。

Answer 1

各TextFlow要素内のすべての要素をループし、各要素ですべての属性を反復処理して同等のhtml styleプロパティを作成できます。このような何か...

var attrConversion = { 
    'textalign': ['text-align','',''], // [Style name, Value preffix, Value Suffix] 
    'color': ['color','',''], 
    'fontfamily': ['font-family','',''], 
    'fontsize': ['font-size','','px'], 
    'fontstyle': ['font-style','',''], 
    'fontweight': ['font-weight','',''] 
}; 

function attrConversor(textflowAttr) { 
    var attr = attrConversion[textflowAttr.name]; 
    return attr[0] + ':' + attr[1] + textflowAttr.value + attr[2]; 
} 

$('TextFlow *').each(function() { 

    var styleField = [], textflowAttrs = []; 
    var element = this; 

    // Loop through all attributes. 
    $.each(this.attributes,function() { 
     if (this.specified) { 
      textflowAttrs.push(this.name); 
      styleField.push(attrConversor(this)); 
     } 
    }); 

    // Remove all textflow attibutes from the element (you can't do it 
    // in the $.each because it would affect the iterations). 
    for (var i=0, l=textflowAttrs.length ; i<l; i++) 
     element.removeAttribute(textflowAttrs[i]); 

    // Apply the 'style' html attribute. 
    $(this).attr('style',styleField.join(';')); 
}); 

ことでTextFlowは、属性名のように見えるが、このアプローチにはいくつかの問題...

1. を持っているだけで、HTMLのようなものですが、キャメルケース形式で、問題があることですthis.attributesは小文字のthis.nameを取得するので、textflow属性名をHTMLバージョンに変換するオブジェクトを作成する必要があります。

2. TextFlowアトリビュート値の中には、htmlスタイルバージョンとの小さな違いがあります。たとえば、フォントファミリ名が異なる可能性があります。fontSizeにはpxという接尾辞が付いていないため、手動で入力する必要があります。そのようなものはすべて発見して世話をする必要があります。

ここでは、フィドルの例を持っている... https://fiddle.jshell.net/rigobauer/xvukm9sn/

は完璧ではないですが、少なくとも、あなたで動作するように何かを与えます。私はそれが助けてくれることを願っています