редактор vue-markdown

Введение

Редактор уценки, разработанный с использованием markdown и highlight.js, в дополнение к общему синтаксису уценки поддерживает быстрый ввод, вставку изображения, копирование кода, полноэкранное редактирование, предварительный просмотр и другие функции.

Он прост и удобен в использовании, всего несколько строк кода, вы можете ввести редактор уценки на свою страницу, область редактирования поддерживает как профессиональный редактор.

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

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

адрес документа

Пример

Функции

Он прост в использовании, нужно только установить пакет npm, импортировать проект для использования и не требует громоздкой настройки инициализации.
Его легко расширять, он поддерживает общие функциональные конфигурации в соответствии с фактическими потребностями, а также может быть глубоко настроен в соответствии с фактическими потребностями.
Небольшой размер и быстрая загрузка, пакет npm удаляет зависимости в highlight.js и codemirror.
Гибкая тема, по умолчанию поддерживает четыре стиля блоков кода, а также может настраивать собственный стиль темы в соответствии с фактическими потребностями.
Мощный, поддерживает профессиональный редактор версий, использует codemirror для реализации окна редактирования, может распознавать синтаксис уценки
Мониторинг событий клавиатуры, например оценка синтаксиса последнего ввода при сохранении, вставке и возврате каретки
Сильная масштабируемость, в дополнение к предоставленному редактору конфигурации свойств, вторичная разработка также может выполняться непосредственно на основе исходных компонентов.

Реализовать идеи

Отслеживая изменения содержимого в области ввода текста, синтаксис уценки ввода компилируется в режиме реального времени и отображается в области предварительного просмотра.

Редактор условно разделен на три части: строка меню заголовка, область ввода содержимого слева и область предварительного просмотра справа. Меню заголовка в основном предназначено для настройки области заголовка и кнопок меню, а кнопки меню могут отображаться и скрываться через файл конфигурации; область редактирования слева, простая версия разработана с текстовой областью, чтобы удовлетворить основные потребности, Профессиональная версия разработана с помощью codemirror, а область редактирования поддерживает ручной ввод текста и вставку через меню заголовка; область предварительного просмотра справа позволяет просматривать введенный текст в режиме реального времени, и вы можете переключаться между областью редактирования и предварительным просмотром. область с помощью кнопки меню.

Способ установки

Установить с помощью нпм

Установить зависимости

npm i -S vue-meditor

Скопируйте компонент в проект

Потяните код репозитория git на локальный

git clone https://github.com/zhaoxuhui1122/vue-markdown.git

Скопируйте содержимое папки src в папку компонентов

использовать в проекте

При установке пакета npm

Простая версия

import Markdown from 'vue-meditor'

Профессиональное издание

import { MarkdownPro } from 'vue-meditor'

Компоненты предварительного просмотра

import { MarkdownPreview } from 'vue-meditor'

При копировании компонентов на локальный (рекомендуется)

Простая версия

import Markdown from '@/components/markdown/...';

Профессиональное издание

import MarkdownPro from '@/components/markdown/pro';

Компоненты предварительного просмотра

import MarkdownPreview from '@/components/markdown/preview';

использовать на странице

<template>
    <div class="markdown">
        <Markdown/>
    </div>
</template>

<script>
    import Markdown from 'vue-meditor';
    
    export default {
        name: "markdown",
        components: {
            Markdown
        }
    }
</script>

API

Основные свойства редактора

value

Type: String/Number
Default: ''

Текст, введенный редактором, поддерживаетv-dodelДвусторонняя привязка данных устанавливает содержимое редактора и получает значение редактора.

width

Type: String/Number
Default: auto

Начальная ширина редактора.

height

Type: Number
Default: 600

Начальная высота редактора.

bordered

Type: Boolean
Default: true

Имеет ли редактор границу.

toolbars

Type: Object
Default: 参见下表

Кнопка меню заголовка управляется установкой значения true или false, чтобы решить, отображать ли ее. Текущая конфигурация поддерживает отображение и скрытие кнопки управления, и в будущем она будет поддерживать порядок отображения в соответствии с конфигурацией.

название	инструкция	Отображать ли по умолчанию
strong	смелый	да
italic	курсив	да
overline	зачеркнутый	да
h1	Название 1	да
h2	Название 2	да
h3	Название 3	да
h4	Название 4	нет
h5	Название 5	нет
h6	Название 6	нет
hr	линия разделения	да
quote	Цитировать	да
ul	неупорядоченный список	да
ol	упорядоченный список	да
code	кодовый блок	да
link	Ссылка на сайт	да
image	image	да
table	лист	да
checked	Полный список	да
notChecked	незаконченный список	да
preview	предварительный просмотр	да
split	Переключатель режима разделения экрана	да
print	Распечатать	нет
theme	переключатель темы	да
fullscreen	полноэкранный	да
exportmd	Экспортировать как файл *.md	да
importmd	Импортировать локальные файлы *.md	да
save	кнопка сохранения	нет
clear	ясное содержание	нет

theme

Type: String
Default: light

Тема блока кода редактора, в настоящее время поддерживаетсяlight,dark,oneDark,gitHubЧетыре стиля блока кода, вы можете настроить тему, настроив тему и изменив файл стиля.

При настройке темы в область предварительного просмотра будет добавленоmarkdown-theme-[theme]изclass.

autoSave

Type: Boolean
Default: false

Включить ли автоматическое сохранение, когда оно включено, его можно привязать путем привязкиon-saveСобытия получают значение и тему блока кода в редакторе.

<Markdown @on-save="handleOnSave"/>

 handleOnSave({value, theme}){
        console.log(value, theme);
    }

interval

Type: Number
Default: 10000

Интервал автосохранения, ед.:mm, по умолчанию 10000 мм, нужноautoSave = trueтолько действителен.

exportFileName

Type: String
Default: unnamed

Имя экспортируемого md-файла, по умолчанию — unnamed.md.

markedOptions

Type: Object
Default: {}

Отмеченный элемент конфигурации можно настроить в соответствии с требованиями.

<Markdown :markedOptions="{baseUrl:'http://***.oss-cn-shanghai.aliyuncs.com/'}"/>

isPreview

Type: Boolean
Default: false

Независимо от того, является ли это режимом предварительного просмотра, его можно использовать в качестве компонента предварительного просмотра, когда он включен, и функция такая же, как у компонента предварительного просмотра.

copyCode

Type: Boolean
Default: true

Поддерживать ли копирование содержимого внутри блоков кода.

copyBtnText

Type: String
Default:

Кнопка Копировать код отображает текст.

Основные свойства компонента предварительного просмотра

initialValue

Type: String/Number
Default: ''

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

theme

Type: String
Default: light

Тема блока кода, соответствующая теме блока кода редактора редактора.

markedOptions

Type: Object
Default: {}

Отмеченный элемент конфигурации соответствует конфигурации в редакторе.

copyCode

Type: Boolean
Default: true

Поддерживать ли копирование содержимого внутри блоков кода.

copyBtnText

Type: String
Default:

Кнопка Копировать код отображает текст.

on-ready

Запускается при инициализации редактора, возвращаемое значениеObject, содержащий сам компонент иinsertContentметод.

on-save

Событие сохранения редактора, срабатывающее при автоматическом или ручном сохранении, поддержкаctrl+sилиcommand+sСохранение триггера, тип возвращаемого значенияObject, содержащий текущее входное значениеvalueи выбранная тема блока кодаtheme.

on-paste-image

Слушайте событие вставки изображения в редакторе, которое запускается, когда изображение вставляется вручную в область редактирования, которое можно использовать для поддержки вставки и вставки файлов изображений, и возвратаfileфайл, который можно объединить после загрузки файлаon-readyвернулся в случаеinsertContentВставить картинку.

on-copy

Копировать содержимое блока кода и возвращать текст текущего блока кода при срабатывании. Это действительно только при включенном копировании кода.

Вторичное развитие

Вставить Вставить изображение

on-paste-imageХотя он может поддерживать мониторинг события вставки изображения, он не будет обрабатывать логику загрузки изображения на сервер и вставки ссылки в редактор.

В настоящее время, если вы хотите поддерживать вставку и вставку изображений, вам необходимоon-paste-imageЗагрузите файл изображения в метод, после получения адреса изображения используйтеon-readyМетод insertContent, возвращаемый в методе, вставляет изображение.

Вышеупомянутая операция кажется слишком сложной, вы можете напрямую расширить миксины в исходном коде.handlePasteметод, после завершения загрузки изображения вызовите его напрямуюthis.insertContentметод вставки изображения.

Исправлять/markdown/mixins/common.js

handlePaste(_, e) {// 粘贴图片
    const { clipboardData = {} } = e;
    const { types = [], items } = clipboardData;
    let item = null;
    for (let i = 0; i < types.length; i++) {
        if (types[i] === 'Files') {
            item = items[i];
            break;
        }
    }
    if (item) {
        const file = item.getAsFile();
        if (/image/gi.test(file.type)) {
            e.preventDefault();
            // 1.上传操作
            // 2.插入图片 this.insertContent(`![image](imgUrl)`)
        }
    }
}

Поддерживает синтаксис, такой как блок-схемы, диаграммы Ганта и т. д.

В настоящее время редактор поддерживает только общий синтаксис кода. Если вам нужно реализовать такие функции, как блок-схемы, вам необходимо дальнейшее расширение. Взяв в качестве примера простую блок-схему, конкретные идеи реализации заключаются в следующем:

По умолчанию markjs будет использовать метод renderer.code для разбора входного блока кода и использованияhighlight.jsПодсветка синтаксиса поддерживается. Вы можете ввести синтаксис блок-схемы в блок кода и указать язык, переписать метод синтаксического анализа кода помеченного.Renderer и объединитьflowchart.jsКод дорожной карты анализируется, и возвращается текстовое содержимое.

Измените `/markdown/libs/js/simple.js

import hljs from './hljs';
import index from 'index';
import {parse} from 'flowchart.js'

hljs.initHighlightingOnLoad();

const renderer = new index.Renderer();
renderer.code = (code, language) => {
    if (language === 'flow') {// 流程图
        const dom = document.createElement('div');
        const flowchart = parse(code);
        flowchart.drawSVG(dom, {/*相关配置*/});
        return  dom.innerHTML;
    } else {// 默认解析
        return `<pre class="hljs"><code class="${language}">${hljs.highlightAuto(code).value}</code></pre>`
    }
}
export default index.setOptions({
    renderer,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    highlight: function (code) {
        return hljs.highlightAuto(code).value;
    }
})

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

`index.js, используемый в проекте, является его функцией конфигурации по умолчанию. Если требуется специальное преобразование, его внутренний метод анализа может быть переписан, то есть его методы, связанные с визуализатором, могут быть переписаны.Справочная документация.

Автоматически генерировать каталог документов

Компоненты области предварительного просмотра и предварительного просмотра документа в настоящее время не поддерживают автоматическое создание каталогов.Идеи для реализации автоматического создания каталогов примерно следующие.

переписатьrenderer.headingметода, добавьте идентификатор к сгенерированному заголовку и введите специальную клавишу быстрого доступа, например[TOC], найдите все теги заголовков в области предварительного просмотра, проанализируйте иерархическую взаимосвязь и сгенерируйте теги каталога.

замена значка

Все ссылки на значки и имена в проекте/assets/font/index.html, обратите внимание при замене, флажок в области предварительного просмотра иконка, обратите внимание на замену вместе, Исправлять/assets/css/index.lessвнутриinput[type="checkbox"]из:afterстиль.

Оптимизация размера кода

извлечение открытого кода

При сборке пакета npm три компонента полностью независимы, а публичные файлы не извлекаются, поэтому при импорте двух или трех компонентов в один и тот же проект возникает определенное количество дублирующегося кода. главным образом дляhighlight.js,marked,iconfont, Несколько частей стиля css.

Решение: Скопируйте компоненты в локальный проект и извлеките эти файлы как общие файлы при упаковке.

Уведомление: Иконочный шрифт, используемый в трех компонентах, является одним и тем же набором, если он просто используется.previewкомпоненты, Будет введен иконочный шрифт, используемый во всем проекте, а введение иконочного шрифта может быть удалено. переписатьinput[type="checkbox"]Стиль компонента предварительного просмотра будет уменьшен вдвое, а файл стиля находится вmarkdown/assets/css/index.less.

оптимизация объема codemirror

codemirror в основном разделен на основные файлы, файлы, связанные с режимом, и файлы стилей. Основной файл ненормально большой. В настоящее время для файла режима выбрано только пять файлов css/jsvascript/markdown/meta/xml. Среди них необходимо указать markdown.js и meta.js.Общий стиль кода языка программирования был определен в проекте как один из стилей css/js/xml.Например, less/sass/scss анализируется в соответствии с правилами css, а html/vue анализируется в соответствии с правилами xml Parse. Оптимизацию можно начать со следующих аспектов

Уменьшите размер основного файла codemirror.
Уменьшить зависимости ссылочного режима

Оптимизация объема highlight.js

Первоначальный объем highlight.js также велик, основная причина в том, что для поддержки различных языков кода при компиляции вводятся соответствующие файлы парсинга. Проект был проверен в соответствии с общими языками кодирования и представлен по запросу.Файлы, на которые ссылаются, могут быть снова удалены в соответствии с их собственными потребностями.

видетьsrc/markdown/libs/js/hljs.js, поддерживаемые в настоящее время языки

import hljs from 'highlight.js/lib/highlight'

import javascript from 'highlight.js/lib/languages/javascript'
import java from 'highlight.js/lib/languages/java';
import css from 'highlight.js/lib/languages/css';
import less from 'highlight.js/lib/languages/less';
import go from 'highlight.js/lib/languages/go';
import markdown from src;
import php from 'highlight.js/lib/languages/php';
import python from 'highlight.js/lib/languages/python';
import ruby from 'highlight.js/lib/languages/ruby';
import stylus from 'highlight.js/lib/languages/stylus';
import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';

const languages = {
    javascript,
    java,
    css,
    less,
    markdown,
    go,
    php,
    python,
    ruby,
    stylus,
    typescript,
    xml
}
Object.keys(languages).forEach(key => {
    hljs.registerLanguage(key, languages[key])
})

export default hljs;

Профессиональный редактор codemirror/simple.js

Идея оптимизации: нет

оптимизация размера иконок

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

обновить маршрут

Редактор обычной версии работает с выделенным текстом
Функция каталога документов
Оптимизация громкости редактора профессиональных версий
Разработка React-версии
...

Обратная связь

Для функциональных дефектов, методов использования и функций, которые вы хотите расширить, вы можете указатьIssues.