Порекомендуйте плагин редактора Markdown на основе Vue — mavonEditor

внешний интерфейс GitHub Vue.js Markdown

гитхаб-адрес

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

Функции

  • Поддержка упрощенного китайского, английского, французского, испанского четырех языков
  • Адаптация мобильного терминала
  • Комплексное расширение грамматики
  • Поддержка загрузки изображений
  • Хорошо документированный, многофункциональный и настраиваемый

mavonEditor

npm

Редактор уценки на основе Vue

English Documents

Demo for jsfiddle

пример (отображение изображения)

PC

PC

PC

Установить мавон-редактор (установить)

$ npm install mavon-editor --save

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

index.js:

    // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

index.html

<div id="main">
    <mavon-editor v-model="value"/>
</div>

подсветка кода

Если вам не нужна подсветка кода hightlight, вы должны установить ishljs в false

Включить подсветку кода

    // ishljs默认为true
    <mavon-editor :ishljs = "true"></mavon-editor>

Чтобы оптимизировать размер плагина, отv2.4.2Следующие файлы будут использоваться по умолчаниюcdnjsВнешняя ссылка:

  • highlight.js
  • github-markdown-css
  • katex(v2.4.7)

подсветка кодаhighlight.jsЯзыковой синтаксический анализ файлов и стили подсветки кода в файле .github-markdown-cssиkatexтолько вmountedпри загрузке

Notice: дополнительная цветовая схемаиПоддерживаемые языкиОтhighlight.js/9.12.0экспортируется

загрузить изображение

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

Примечание

  • Стиль размера по умолчанию: min-height: 300px , min-width: 300px можно переопределить самостоятельно.
  • Базовый z-индекс: 1500
  • Только для отображения вы можете установить реквизиты: toolbarsFlag: false , subfield: false, defaultOpen: "preview"

Документация API

props

имя имя тип тип значение по умолчанию по умолчанию описывать
value String Первоначальный значение
language String zh-CN Выбор языка, временная поддержка zh-CN: упрощенный китайский, en: английский, fr: французский, pt-BR: португальский
fontSize String 15px Размер текста области редактирования
scrollStyle Boolean true Включить стиль полосы прокрутки (пока поддерживается только хром)
subfield Boolean true true: двойной столбец (редактирование и предварительный просмотр на одном экране), false: один столбец (редактирование и предварительный просмотр на разделенном экране)
defaultOpen String редактировать: отображать область редактирования по умолчанию, предварительный просмотр: отображать область предварительного просмотра по умолчанию, другое = редактировать
placeholder String Начать редактирование... Текст подсказки по умолчанию, когда поле ввода пусто
editable Boolean true Разрешить ли редактирование
codeStyle String code-github стиль уценки: по умолчанию github,дополнительная цветовая схема
toolbarsFlag Boolean true Отображается ли панель инструментов
navigation Boolean false Каталог отображения по умолчанию
toolbars Object Следующий пример панель инструментов
ishljs Boolean true подсветка кода
imageFilter function null Функция фильтра изображения, параметрFile Object, который требуется для возвратаBoolean, trueУказывает, что документ является законным,falseУказывает, что файл не является легальным
imageClick function null Событие клика по изображению, по умолчанию предварительный просмотр, можно перезаписать 
 /*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
toolbars: {
      bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: true, // 标记
      superscript: true, // 上角标
      subscript: true, // 下角标
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏编辑
      readmodel: true, // 沉浸式阅读
      htmlcode: true, // 展示html源码
      help: true, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
      save: true, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: true, // 导航目录
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
      /* 2.2.1 */
      subfield: true, // 单双栏模式
      preview: true, // 预览
  }

events

имя имя метода параметр params описывать
change String: value , String: render Событие обратного вызова при изменении области редактирования (рендеринг: значение является результатом разбора уценки)
save String: value , String: render Событие обратного вызова ctrl + s (сохранение нажатия клавиши, а также запуск обратного вызова)
fullScreen Boolean: status , String: value Переключить событие обратного вызова полноэкранного редактирования (логическое значение: включено полноэкранное состояние)
readModel Boolean: status , String: value Переключить событие обратного вызова иммерсивного чтения (логическое значение: состояние чтения включено)
htmlCode Boolean: status , String: value Просмотр события обратного вызова исходного кода html (логическое значение: статус открытия исходного кода)
subfieldToggle Boolean: status , String: value Переключить событие обратного вызова для редактирования одного и двух столбцов (логическое значение: открытое состояние двойного столбца)
previewToggle Boolean: status , String: value Переключить событие обратного вызова для редактирования предварительного просмотра (логическое значение: состояние предварительного просмотра включено)
helpToggle Boolean: status , String: value Просмотр события обратного вызова справки (логическое значение: справка включена)
navigationToggle Boolean: status , String: value Событие обратного вызова для переключения каталога навигации (логическое значение: состояние навигации включено)
imgAdd String: filename, File: imgfile Файл изображения добавляет событие обратного вызова (имя файла: имя файла, записанное в md, файл: объект файла)
imgDel String: filename Событие обратного вызова удаления файла изображения (имя файла: имя файла, записанное в md)
Категории