如何使用 JavaScript 或 jQuery 将 Flex TextFlow 对象转换为 HTML 标记？ [复制]答案

【问题标题】：How to use JavaScript or jQuery to convert a Flex TextFlow object into HTML markup? [duplicate]如何使用 JavaScript 或 jQuery 将 Flex TextFlow 对象转换为 HTML 标记？ [复制]
【发布时间】：2017-10-10 00:56:12
【问题描述】：

我正在使用 ReactJS 和富文本的 JavaScript 重新创建一个 Adobe Flex 应用程序。应用程序中显示的内容采用来自 Adobe Text Layout Framework 的 TextFlow-object 形式。这会产生如下输出：

<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')获得的价值

标签： javascript jquery html apache-flex

【解决方案1】：

您可以遍历每个 TextFlow 元素内的所有元素，并在每个元素上迭代其所有属性以创建等效的 html style 属性。像这样的……

var attrConversion = {
    'textalign': ['text-align','',''], // [Style name, Value prefix, 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/

并不完美，但至少能给你一些可以使用的东西。希望对你有帮助

【讨论】：