Нужно сделать мини-редактор текста на Javascript по типу tinyMCE
который преобразует содержимое textarea в более удобный для редактирования формат
Допустим есть такой текст:
# Title - title
BidiPass
# Desc - desc
blockchain-powered
# 8th Paragraph - 8p
build transparency
и нужно преобразовать его в такой вид
<input value="Title"/>
<select>
<option value="title" selected>title</option>
<option value="7p">7p</option>
<option value="6p" >6p</option>
<option value="5p" >5p</option>
....
</select>
<textarea>BidiPass</textarea>
<input value="Desc"/>
<select>
<option value="desc" selected>desc</option>
<option value="7p">7p</option>
<option value="6p" >6p</option>
<option value="5p" >5p</option>
....
</select>
<textarea>blockchain-powered</textarea>
<input value="8th Paragraph"/>
<select>
<option value="8p" selected>8p</option>
<option value="7p">7p</option>
<option value="6p" >6p</option>
<option value="5p" >5p</option>
....
</select>
<textarea>BidiPass</textarea>
список option-сов - всегда один и тот же - не меняется
Картинка будет примерно такой
При нажатии зеленой кнопки добавляется новый блок
При нажатии красной блок удаляется
При заполнении новой формы это все преобразуется в изначальную форму
Парсер с регулярками который преобразует формат текста в массив уже написан на Ruby
нужно из массива рендерить эти блоки туда и обратно
Также можно сделать переключалку между текстом и редактором
например как на гитхабе для markdown
Использование фреймворка Vue.js будет плюсом.
Спасибо, ждем откликов.
