Vue-BL-Markdown-Editor

Один из основанных на markdown-it высоко расширяемых компонентов редактора Vue.

Позволяет предоставлять слоты для пользовательских инструментов.

Позволяет динамически регистрировать компоненты и вставлять их в определённые позиции панели инструментов.

Преимущества: можно полностью настроить функции панели инструментов, вызовы markdown-it плагинов и т. д.

Демонстрационный сайт.

Установка

$ npm install vue-bl-markdown-editor --save

Использование (как включить)

main.js:

    // Глобальная регистрация
    // import with ES6
    import Vue from 'vue'
    import MarkDownEditor from 'vue-bl-markdown-editor'
    import 'vue-bl-markdown-editor/dist/css/main.css'
    // use
    Vue.use(MarkDownEditor);
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

Требования к конфигурации

<!--Этот компонент использует библиотеку шрифтов font-awesome, пожалуйста, предварительно импортируйте её в index.html-->
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!--Стиль кода, подробнее см. https://highlightjs.org -->
<link href="//cdn.bootcss.com/highlight.js/9.14.1/styles/atom-one-dark.min.css" rel="stylesheet">
<!--Тема редактора-->
<link href="//cdn.bootcss.com/github-markdown-css/3.0.1/github-markdown.min.css" rel="stylesheet">

Конфигурация

Панель инструментов

Пример панели инструментов разработчика см. src/dev/toolBar

Конфигурации панели инструментов

config: {
  emojis:{
    // Настройка нескольких эмодзи
    more:[{name:'test',datas:['1','2']}],
    // перекрывать ли по умолчанию
    isCover: true
  },
  // Конфигурация загрузки изображений
  picture:{
    // Необходимо передать путь после загрузки/перетаскивания/загрузки
    // from paste/drag/upload вставить/перетащить/загрузить
    // Обратный вызов асинхронный, используйте promise для примера, см. src/dev/App.vue
    uploadCallback: (file,from)=>{
      return new Promise(resolve => {
        resolve({name:'',url: ''});
      });
    },
    // Анализировать ли список изображений
    resolving: true
  }
}
toolBars:[
  'bold','italic',...больше
]

Пользовательская панель инструментов

let editor = this.$refs.editor;
let toolBar1 = editor.registerToolBarComponent('demo1',require(Example1.vue));
editor.addToolBar(toolBar1/*,0 вставить позицию*/);

Методы

События

Слот

Расширенное использование

• Разрешить самостоятельно вызывать markdownit для регистрации плагинов (получать из события ready или напрямую из ref)

TODO

• Базовая панель инструментов
• Реализовать функцию отмены и повтора
• Совместимость с мобильными устройствами
• Улучшение стиля
• Пакет dev демонстрационной страницы проекта
• Ссылка на стиль highlight (*)
• Конфигурация обратного вызова загрузки изображения
• Загрузка изображений путём вставки
• Загрузка изображений перетаскиванием
• Синхронная прокрутка (временно рассчитывается в соответствии с высотой полосы прокрутки**)

Проблемы совместимости записи звука (тестирование chrom/firefox нормальное, edge не удалось)

Должен работать под https, тестовый запуск нормальный

• Пользовательский компонент панели инструментов для записи звука (*)
• Не поддерживается загрузка локальных изображений (ожидается решение)

Тестирование

• Пользовательская панель инструментов
• Конфигурация эмодзи
• Загрузка изображения
• Вставка изображения
• Перетаскивание для загрузки

ОШИБКА

• Невозможно автоматически перенести последнюю строку списка в следующую строку для отображения (используйте клавишу ввода для автоматической прокрутки вниз)
• Проблема с положением последнего элемента панели инструментов на мобильных устройствах (восстановление невозможно, поскольку ПК имитирует мобильные устройства)
• Рендеринг в реальном времени слишком медленный, что приводит к зависанию и неправильному отображению

Надеемся, что мы сможем разработать полезные панели инструментов вместе

Поддержка