Как вставить vue компонент в contenteditable div - PullRequest
Новая
       12

Как вставить vue компонент в contenteditable div

2 голосов
/ 22 января 2020

Я хочу создать простой редактор wysiwyg с vue. Я нашел только один настоящий редактор wysiwyg, созданный в vue. js. Вот это __ https://quasar.dev/vue-components/editor (но я не нашел там возможности для вставки изображения). Другие vue редакторы wysiwyg - это только оболочки для tinymce или ckeditor et c.

Я планирую создать SIMPLE vue -редактор, используя базовые команды из примера с сайта разработчика mozilla. Здесь это https://codepen.io/chrisdavidmills/pen/gzYjag.

Сначала я хочу знать, как вставить vue компоненты в contenteditable div. Что я имею в виду? Например, я хочу создать плагин редактора, который будет вставлять изображение при нажатии на значок на панели инструментов. Вставленное изображение должно быть с прикрепленными событиями (событие щелчка), оно может быть изменяемого размера и т. Д. c. Базовую идею я нашел в ответе здесь { ссылка }, (автор @ AJT82). Он привел мне пример вставки vue -компонента (изображения) в contenteditable div. Вот это https://codesandbox.io/s/vue-template-m1ypk.

Итак, у меня есть следующие вопросы.

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

1) Что именно я должен хранить в базе данных?

2) Сохраненный текст с изображениями должен отображаться где-то на сайте как статья только для просмотра. Это означает, что я должен был сгенерировать html (например, <img src="" />). Как я возьму его из вставленного vue -компонента?

3) Пользователь может редактировать сохраненный ранее код из редактора. Как вставить (вставить и сохранить в базу данных ранее) vue -компонент снова?

Я заблудился в этих вопросах.

1 Ответ

1 голос
/ 23 января 2020

Я сделал вам пример, показывающий, как вы можете вводить абсолютно все в любой компонент WYSIWYG (кроме действительно плохих:)

Используя ваш первый выбор редактора WYSIWYG, и, возможно, самый приятный из них всех .. .

https://quasar.dev/vue-components/editor

Здесь вы можете увидеть, как легко, например, вставить изображение случайного кота. Вы можете открыть диалоговое окно и запросить имя изображения, вы можете позволить пользователю загрузить изображение, дождаться обещания, которое возвращает ссылку, затем вставить это изображение по возвращенной ссылке или сделать еще более дикие вещи.

https://codepen.io/njsteele/pen/wvBNYJY

Здесь выполняется рендеринг компонента: 

<!-- Here is where we render the component and capture it's output... -->
<div ref="renderComponent" v-show="false">
  <!-- Due to limitation of codepen, must not self-close -->
  <component :is="renderThisComponent" v-bind="renderTheseProps">
  </component>
</div>

При нажатии «Вставить случайного кота» будет вставлен GIF случайного анимированного кота из Cats As. Служба.

Нажав Вставить компоненты квазара, вы сможете выбрать один из компонентов q-icon и анимированный неопределенный круг выполнения. Вы также можете добавить свои собственные компоненты. Это работает абсолютно с любым Vue компонентом, но он не будет обновлять его, как только он будет визуализирован в вашем редакторе WYSIWYG, и после этого он станет равным HTML. Я также использовал рефрендер, который работает, но он основан на c, чтобы показать вам, как легко выполнить sh. Вместо этого я бы обновил его до прокси-компонента, чтобы он никогда не отображался в DOM с первого раза или не ожидал $ nextTick.

Вы также можете видеть, что вы можете вводить токены (хотя это было сделано в Quasar). игровая площадка). Он показывает, как вы можете внедрить переменные, которые могли иметь отношение к текущему пользователю / et c.

Если вы хотите, вы также можете разрешить пользователям создавать свои собственные компоненты или разрешить создавать созданные пользователем шаблоны. впрыскивая, вы также можете вставить список Emoji или даже @mentions, которые могут вставлять живые просмотры, если этот пользователь в данный момент онлайн, и т. д. c.

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

Получите здесь источник и используйте его в своих проектах, если хотите ... https://github.com/onexdata/nano-var-template

...