Преобразование форматированного html-текста в svg

Я ищу инструмент javascript/lib, который может преобразовывать форматированный html-текст (теги шрифта, поля и т. Д.) В svg. Я использую bootstrap-wysiwyg для включения расширенного ввода текста, но мне нужно получить результат, преобразованный в родной svg. Исходный HTML-то вроде:Преобразование форматированного html-текста в svg

<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>

, который может получить довольно сложным после игры вокруг с помощью редакторов есть немного. Альтернативный i был бы очень рад найти аналогичный текстовый редактор javascript WIWhSWYG, который сразу создаст родной svg, но пока ничего не нашел.

Любой указатель высоко ценится.

UPDATE: Хотя до сих пор ищет полное решение я экспериментировал прямо сейчас с http://quilljs.com/ , который кажется очень перспективным, поскольку это, по крайней мере делает половину работы для вас. Он имеет очень удобный API, благодаря которому вы можете получить представление текущего текста со всей его информацией о формате как массив объектов Text/Format (называемых Deltas в своей собственной терминологии). Эти Deltas являются очень хорошей отправной точкой для создания желаемых текстов SVG, особенно если вы, как и в моем случае, нуждаетесь только в небольшом подмножестве общих функций редактора.

источник

2014-09-13 dorjeduck

Если результирующий SVGs будет отображаться только в браузере, вы можете использовать элемент '' в HTML в возможности размещения вашего SVG. Если это неприемлемо, попробуйте ли вы погулять? Я нашел по крайней мере два разных инструмента. –

Спасибо BigBababook, я изучал это еще раз, но мне нужна возможность использовать текст в качестве маскирующего пути, поэтому foreinObject не будет делать для меня. Тем не менее, спасибо за комментирование. – dorjeduck

Я знаю, как это сделать с http://www.cloudformatter.com/CSS2Pdf.Demos.TryIt. Задний конец поддерживает SVG, а также выход в формате PDF. Потребуется день, чтобы включить поддержку SVG на бэкэнд-сервере. –

См

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

для необработанного доказательства концепции взлома преобразовать quilljs.com ввода редактора в SVG. Реализованы только некоторые основные функции редактора. Ключом к этой реализации является использование абстрактного представления форматированного ввода-ввода - deltas - которое quilljs.com предлагает через его чудесный API. Эта демонстрация может быть ошибкой, но предназначена для того, чтобы показать один из способов ее реализации.

enter image description here

источник

2014-09-16 19:51:26 dorjeduck

Как указано выше, еще один пример. Содержимое редактируемого div. Это делает SVG всей области, включая заголовок, но вы можете настроить JS для форматирования любого DIV, который вам нравится.

http://www.cloudformatter.com/CSS2Pdf.Demos.TryIt

Мы только проводной, чтобы скачать сейчас, нажмите кнопку загрузки и выберите SVG.

Большинство всех демо на этой странице работают таким же образом. Мы работаем только с параметрами калибровки SVG, вставленными в другой SVG (для графических демонстраций).

Веб-сайт слева, SVG-результат справа на изображении ниже.

enter image description here

источник

2014-09-17 05:39:46

Thx Kevin, интересно узнать еще в моем случае. Я ищу решение для javascript, которое будет использоваться в программе. – dorjeduck

Преобразование форматированного html-текста в svg

ответ

Смежные вопросы