Question

我正在尝试启动一个项目，我可以轻松编辑pdfmake的DocDefinitions。如果有人有兴趣看一下，我在GitHub上分享了初始代码：https://github.com/unluckynelson/pdfmake-generator

以下是我所拥有的演示：http://powerprop.co.za/pdfmake-generator/

这个想法基本上是让用户能够编辑TinyMCE textarea并在同一页面上显示生成的pdf的结果，从而使视觉编辑非常容易进行和更新。

我的问题是：有没有办法解析HTML？（从TinyMCE生成）到Javascript对象中，例如一个简单的表格如下所示：

HTML文字

<html>
<table class="table table-condensed">
    <tr>
        <td>Some text
            <div>Nested Div</div>
        </td>
        <td></td>
    </tr>
</table>
</html>

作为JS对象解析：

var obj = {
    html: {
        table: {
            classes: ["table", "table-condensed"],
            styles: [],
            tr: [
                {
                    td: {
                        classes: [],
                        styles: [],
                        text: [{"Some text "}, {
                            div: {
                                classes: [],
                                styles: [],
                                text: "Nested Div"
                            }
                        }]
                    }
                },
                {
                    td: {
                        classes: [],
                        styles: [],
                        text: []
                    }
                }
            ]
        }
    }
}

Answer 1

您可以使用$.parseHTML(htmlString) method of jQuery将html字符串解析为DOM对象，该对象具有非常全面的节点列表：类，样式，节点，文本，子节点等。当然它不是你想要的确切JS对象，但为什么不使用通用结构呢？您可以递归地跟随节点，获取类/样式信息甚至更多！

让我们看一个基本的最小例子：

＆＃13;

var text = '<table class="table table-condensed" border ="1">' +
           '  <tr>' +
           '    <td>Some text' +
           '      <div>Nested Div</div>' +
           '    </td>' +
           '    <td>Another text</td>' +
           '  </tr>' +
           '</table>' +
           '<span>Heeey' +
           '</span>';
           
var $log = $("#log"),
  $output = $("#output"),
  html = $.parseHTML(text);
 
// Append the parsed HTML
$output.append(html);
 
// Gather the parsed HTML's node names etc.
$.each(html, function(i, el) {
  $log.append("<li>nodeName: " + el.nodeName + "</li>");
  $log.append("<ul><li>childNodes count: " + el.childNodes.length + "</li></ul>");
  $log.append("<ul><li>classNames: " + el.className + "</li></ul>");
  $log.append("<ul><li>textContent: " + el.textContent + "</li></ul>");
  console.log(el);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output">Nodes will be here:</div>
<hr />
<ul id="log">
  <li>Initial log text.</li>
</ul>

＆＃13;

通过单击每个节点运行代码段时，可以从Firefox控制台（F12）中看到实际的节点属性。

Answer 2

我相信应该在tinymce中有一些API调用（你可以查看文档）。但现在找不到。

确实有一个API序列化器可以串起来。它将textarea中创建的整个DOM结构转换为字符串。然后你可以使用库html-to-json https://www.npmjs.com/package/html-to-json或编写你自己的解析器，这个解析器很容易用class MediaRecorderWrapper extends React.Component { componentDidMount() { this.mediaRecorder = new MediaRecorder(); if(this.props.playing) { this.mediaRecorder.start(); } } componentWillReceiveProps(nextProps) { if(nextProps.playing !== this.props.playing) { if(nextProps.playing) { this.mediaRecorder.start(); } else { this.mediaRecorder.stop(); } } } } const mapState = (state) => { return { playing : state.playing }; } export default connect(mapState)(MediaRecorderWrapper);符号开头，以<或>结尾，如果/>，!/>有几个正则表达式。主要问题是排除用户输入（tinymce应该逃脱它们）。

编辑：这是序列化程序https://www.tinymce.com/docs-3x//api/dom/class_tinymce.dom.Serializer.html/ </ [...]>

pdfmake文档定义生成器

2 个答案: