Редактор vue-meditors

Вторичная разработка на основе открытого проекта vue-markdown.

Адрес проекта vue-markdown: https://zhaoxuhui1122.github.io/vue-markdown/.

Основное дополнение: метод интерфейса для загрузки изображений

Адрес GitHub: https://github.com/wanglinyong/vue-meditors.

1. Введение

Это редактор Markdown, разработанный с использованием marked и highlight.js. В настоящее время он может использоваться только в проектах Vue.

Редактор включает в себя основные функции редактора Markdown. Панель инструментов можно настроить по своему усмотрению, также можно выполнить вторичную разработку.

Эффект:

2. Установка

npm i vue-meditors

3. Использование в проекте

import MarkDown from 'vue-meditors'
...
components:{
    MarkDown//импорт компонента
},
data() {
      return {
      placeholderValue:"Пожалуйста, введите описание проблемы",//содержимое placeholder
        initialValue: "",//значение по умолчанию для markdown
        theme: 'OneDark'//тема
      };
    },
...
<template>
	<mark-down @on-save="save" ref="md" @on-change="changeImg"
	:theme="theme" :initialValue="initialValue" :placeholderValue="placeholderValue"/>

	<div @click="saveMd()">Сохранить</div>
</template>

4. Получение содержимого редактора Markdown

Событие сохранения запускается нажатием кнопки «Сохранить», вызывая метод сохранения дочернего компонента handleSave.

saveMd(){
      console.log(this.$refs.handleSave)
      this.$refs.md.handleSave();
}

Затем будет запущен обратный вызов on-save и возвращён объект с тремя свойствами:

value // исходный контент
html // экранированный контент на правой стороне
theme // имя темы при сохранении

Мы отслеживаем событие on-save, которое соответствует нашему методу сохранения, чтобы получить содержимое редактора Markdown:

save(content){
      console.log("Исходный контент:"+content.value);
      console.log("Экранированный контент:"+content.html);
      console.log("Тема:"+content.theme);
}

5. Загрузка изображения

При нажатии на значок изображения появится диалоговое окно выбора изображения, и будет передано событие on-change. Таким образом, нам нужно только отслеживать событие on-change, оно передаст нам объект файла.

changeImg(files,callback){
      console.log(files)
      //загрузка изображения
      ....
      var url = data.url;
      callback(url);//возвращаем адрес изображения через callback
}