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

标签 javascript html svg

<分区>

我正在寻找可以将格式化的 html 文本(字体标签、边距等)转换为 svg 的 javascript 工具/lib。我正在使用 bootstrap-wysiwyg 来启用富文本输入,但需要将结果转换为 native 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,通过它您可以获得当前文本的表示及其所有格式信息,作为文本/格式对象数组(在其自己的术语中称为增量)。这些增量是创建所需 SVG 文本的一个很好的起点,特别是如果您像我一样只需要通用富编辑器功能的一小部分。

最佳答案

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

用于转换的未经修饰的概念证明 quilljs.com编辑器输入 svg。只实现了一些基本的编辑器功能。此实现的关键是使用格式化编辑器输入的抽象表示 - 增量 - quilljs.com通过其出色的 API 提供。该演示可能存在问题,但旨在展示一种实现方法。

enter image description here

关于javascript - 将格式化的 html 文本转换为 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25820927/

相关文章:

html - "it goes with the flow"对于 CSS float 和负边距意味着什么?

html - 使用带有 Chromium WebAudio API 的纯 javascript 生成音调

javascript - 检测浏览器对 SVGFragmentIdentifier(s) 的支持

javascript - 相对于自身大小的偏移(使用变换)svg 元素

javascript - 在静态网站中加载数据时增加网站加载时间

Javascript,在输入更改时更新变量

javascript - 如何在 4 帧之间连续制作动画

javascript - 是否可以更新 Mongoose 文档中的对象?

html - 如何设置混合宽度容器(px 和 %)?

javascript - 将 svg 转换为 react-native-svg