将格式化的html文本转换为svg

Question

我正在寻找一个javascript工具/ lib,它可以将格式化的html文本(字体标签,边距等)转换为svg.我正在使用bootstrap-wysiwyg来启用富文本输入,但需要将结果转换为本机svg.最初的html类似于:

<div id="editor" contenteditable="true">Go <font face="Sans">ahead</font>… and&nbsp;
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
    <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
        <div><font size="15" face="Impact">by the&nbsp;</font></div>
    </blockquote>
</blockquote>
<div>
    <div style="text-align: center;"><font size="15" face="Courier New" style="color: inherit;">way</font><span
            style="color: inherit;">&nbsp;</span></div>
</div>
<div>
    <div style="text-align: left;"><span style="color: inherit;">all is now</span></div>
</div>

在使用编辑器功能之后可能会变得非常复杂.替代我会很高兴找到一个类似的javascript WIWhSWYG富文本编辑器,它立即创建本机svg但我到目前为止还没有找到任何东西.

任何指针高度赞赏.

更新:虽然我仍在寻找一个完整的解决方案,但我现在正在使用http://quilljs.com/ 进行实验, 这似乎非常有希望,因为它至少可以为您完成一半的工作.它有一个非常方便的API,您可以通过它来获取当前文本的表示形式及其所有格式信息,作为文本/格式对象的数组(在其自己的术语中称为Deltas).这些Deltas是创建所需SVG文本的一个非常好的起点,特别是如果您(在我的情况下)只需要一小部分常见的富编辑器功能.

Answer 1

看

http://quotemirror.com/lab/quilljsGoesSVG/

用于将quilljs.com编辑器输入转换为 svg 的未经打磨的概念验证。仅实现了一些基本的编辑器功能。此实现的关键是使用格式化编辑器输入的抽象表示形式 - deltas - quilljs.com通过其出色的 API 提供了这种表示形式。这个演示可能有问题，但旨在展示一种实现此目的的方法。