如何使用JavaScript或jQuery将Flex TextFlow对象转换为HTML标记？

问题描述：

我正在使用ReactJS和富文本在JavaScript中重新创建Adobe Flex应用程序。应用程序中显示的内容的格式为TextFlow- Adobe Text Layout Framework的对象。这将产生输出类似如下：如何使用JavaScript或jQuery将Flex TextFlow对象转换为HTML标记？

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

我需要编写一个JavaScript脚本，将遍历所有的TextFlow对象的元素和改变一切，以常规的HTML标记。我只能想象这会要求我 - 例如 - 找到与fontFamily相匹配的所有属性并更改为style="font-family:"，但是我必须从中获得值并将其追加到最后，所以我只是有点迷路了作为如何去做这件事，我真的希望有人能指出我正确的方向，我可以做到这一点。

你用'element.getAttribute（'fontFamily'）得到的值' – LGSon

答

您可以遍历每个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的属性名是一样的HTML，但首字母大写格式，问题是， this.attributes获取小写的this.name，因此您必须创建一个对象以将textflow属性名称转换为html版本。
某些TextFlow属性值可能与html样式版本有一些小的差异。例如，字体系列名称可能不同，fontSize没有px后缀，因此您必须手动输入等等。您必须发现并处理所有这些内容。

这里有一个小提琴例子... https://fiddle.jshell.net/rigobauer/xvukm9sn/

并不完美，但至少给你一些帮助。我希望它有帮助

如何使用JavaScript或jQuery将Flex TextFlow对象转换为HTML标记？

相关推荐