Question

我正在使用ReactJS和富文本在JavaScript中重新创建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>

我需要编写一个JavaScript脚本，它将迭代TextFlow对象中的所有元素，并将所有内容更改为常规html标记。我只能想象这会要求我 - 例如 - 查找匹配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属性名称与html类似，但是在camelcase格式中，问题是this.attributes得到小写的this.name，所以你＆＃39;我必须创建一个对象，将textflow属性名称转换为html版本。
某些TextFlow属性值与html样式版本有一些小的差异。例如，字体系列名称可能不同，fontSize没有px后缀，因此您必须手动设置，等等。您必须发现并且照顾好所有这些东西。

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

不完美，但至少可以给你一些工作。我希望它有所帮助

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

1 个答案: