! npm
Основан на Vue markdown-редактор
! [ПК](. /img/cn/cn-common.png) ! [ПК](. /img/cn/cn-image.gif)
[Просмотреть больше изображений нажмите здесь. . . ](. /doc/cn/images.md)
$ npm install mavon-editor --save
index.js
:
// Глобальная регистрация
// Импорт с ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// Использование
Vue.use(mavonEditor)
new Vue({
'el': '#main',
data() {
return { value: '' }
}
})
index.html
<div id="main">
<mavon-editor v-model="value"/>
</div>
[Больше способов импорта нажмите здесь. . . ](. /doc/cn/use.md) [Как получить и настроить объект markdown-it. . . ](. /doc/cn/markdown.md)
name (название) | type (тип) | default (по умолчанию) | describe (описание) |
---|---|---|---|
value | String | начальное значение | |
language | String | zh-CN | выбор языка, временно поддерживаются zh-CN: китайский, en: английский, fr: французский, pt-BR: португальский, ru: русский |
fontSize | String | 15px | размер шрифта в редакторе |
scrollStyle | Boolean | true | включение стиля прокрутки (временно поддерживается только в Chrome) |
subfield | Boolean | true | true: двойной столбец (редактирование и предварительный просмотр на одном экране), false: одинарный столбец (редактирование и предварительный просмотр на разных экранах) |
defaultOpen | String | edit: по умолчанию отображается область редактирования, preview: по умолчанию отображается область предварительного просмотра, другие = edit | |
placeholder | String | Начните редактирование... | текст по умолчанию при пустом поле ввода |
editable | Boolean | true | разрешение на редактирование |
codeStyle | String | code-github | стиль markdown: по умолчанию github, [доступные схемы цветов](. /src/lib/core/hljs/lang. hljs. css. js) |
toolbarsFlag | Boolean | true | отображение панели инструментов |
navigation | Boolean | false | отображение навигационного меню по умолчанию |
ishljs | Boolean | true | выделение синтаксиса кода |
imageFilter | function | null | функция фильтрации изображений, параметр - объект типа File , требуется вернуть Boolean , true означает, что файл является легальным, false означает, что файл является нелегальным |
imageClick | function | null | событие клика по изображению, по умолчанию - открытие в предварительном просмотре, может быть переопределено |
toolbars | Object | Пример ниже | панель инструментов |
/*
По умолчанию все кнопки панели инструментов открыты, передаются пользовательские объекты
Например: {
```markdown
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, // Код
table: true, // Таблица
fullscreen: true, // Полноэкранный режим
readmodel: true, // Читальный режим
htmlcode: true, // Отображение исходного кода HTML
help: true, // Помощь
/* 1. 3. 5 */
undo: true, // Отмена
redo: true, // Повтор
trash: true, // Удаление
save: true, // Сохранение (вызывает событие save в events)
/* 1. 4. 2 */
navigation: true, // Навигационное меню
/* 2. 1. 8 */
alignleft: true, // Выравнивание по левому краю
aligncenter: true, // Выравнивание по центру
alignright: true, // Выравнивание по правому краю
/* 2. 2. 1 */
subfield: true, // Одинарный/двойной режим
preview: true, // Предварительный просмотр
}
name Метод | params Параметры | describe Описание |
---|
| save | String: value, String: render | Возврат события сохранения (клавиша Ctrl + S) |
| fullScreen | Boolean: status, String: value | Событие переключения на полный экран (boolean: статус открытия полноэкранного режима) |
| readModel | Boolean: status, String: value | Событие переключения на режим погружения в чтение (boolean: статус открытия режима чтения) |
| htmlCode | Boolean: status, String: value | Событие отображения исходного кода HTML (boolean: статус открытия исходного кода) |
| subfieldToggle | Boolean: status, String: value | Событие переключения между одинарным и двойным полем редактирования (boolean: статус открытия двойного поля) |
| previewToggle | Boolean: status, String: value | Событие переключения между режимом предварительного просмотра и редактированием (boolean: статус открытия режима предварительного просмотра) |
| helpToggle | Boolean: status, String: value | Событие отображения справки (boolean: статус открытия справки) |
| navigationToggle | Boolean: status, String: value | Событие переключения между режимом навигации и отображением содержания (boolean: статус открытия режима навигации) |
| imgAdd | String: filename, File: imgfile | Событие добавления изображения (filename: имя файла, записанное в md, File: объект типа File) |
| imgDel | String: filename | Событие удаления изображения (filename: имя файла, записанное в md) |#### Кодирование с подсветкой
> Если вам не требуется подсветка кода, вы должны установить `ishljs` в `false`
Включение подсветки кода props
```javascript
// 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
Внимание:
Доступные схемы цветов и поддерживаемые языки экспортируются из highlight.js/9.12.0
Если вы не используете CDN, загрузите локально по мере необходимости здесь. . .
<template>
<mavon-editor ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
export default {
methods: {
// Привязка @imgAdd события
$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 на место оригинального url! [. . . ](0) -> ! [. . . ](url)
/**
* $vm указывает на экземпляр mavonEditor, его можно получить двумя способами:
*/
}
}
}
``````markdown
### Импорт объекта
* Через импорт объекта: `import {mavonEditor} from . . . ` и т. д., `$vm` будет `mavonEditor`
* Через $refs: html объявление ref: `<mavon-editor ref=md></mavon-editor>`, `$vm` будет `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
}
}
[Подробности загрузки изображений нажмите здесь. . . ](. /doc/cn/upload-images. md)
Клавиша | Код клавиши | Функция |
---|---|---|
F8 | 119 | Включить/выключить навигацию |
F9 | 120 | Переключение между просмотром и редактированием |
F10 | 121 | Включить/выключить полноэкранный режим |
F11 | 122 | Включить/выключить режим чтения |
F12 | 123 | Переключение между одинарным и двойным столбцом |
TAB | 9 | Отступ |
CTRL + S | 17 + 83 | Триггер сохранения |
CTRL + D | 17 + 68 | Удаление выбранной строки |
CTRL + Z | 17 + 90 | Отменить предыдущее действие |
CTRL + Y | 17 + 89 | Повторить предыдущее действие |
CTRL + SPACE | 17 + 32 | Очистить редактирование |
CTRL + B | 17 + 66 | Жирный шрифт |
CTRL + I | 17 + 73 | Курсив |
CTRL + H | 17 + 72 | # Заголовок |
CTRL + 1 | 17 + 49 | # Заголовок |
CTRL + 2 | 17 + 50 | ## Заголовок |
CTRL + 3 | 17 + 51 | ### Заголовок |
CTRL + 4 | 17 + 52 | #### Заголовок |
| CTRL + 6 | 17 + 102 или 54 | ###### Заголовок |
| CTRL + U | 17 + 85 | ++Подчеркнутый текст++ |
| CTRL + M | 17 + 77 | ==Закомментированный текст== |
| CTRL + Q | 17 + 81 | > Цитата |
| CTRL + O | 17 + 79 | 1. Нумерованный список |
| CTRL + L | 17 + 76 | [Ссылка]() || CTRL + ALT + S | 17 + 18 + 83 | <sup>Верхний индекс</sup> |
| CTRL + ALT + U | 17 + 18 + 85 | - Несколько пунктов |
| CTRL + ALT + C | 17 + 18 + 67 | ``` Кодовый блок |
| CTRL + ALT + L | 17 + 18 + 76 | ! [Ссылка на изображение]() |
| CTRL + ALT + T | 17 + 18 + 84 | Таблица |
| CTRL + SHIFT + S | 17 + 16 + 83 | <sub>Нижний индекс</sub> |
| CTRL + SHIFT + D | 17 + 16 + 68 | ~~Зачеркнутый текст~~ |
| CTRL + SHIFT + C | 17 + 16 + 67 | По центру |
| CTRL + SHIFT + L | 17 + 16 + 76 | По левому краю |
| CTRL + SHIFT + R | 17 + 16 + 82 | По правому краю |
| SHIFT + TAB | 16 + 9 | Отменить отступ |
## Зависимости
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [auto-textarea](https://github.com/hinesboy/auto-textarea)
## Расширенные возможности Markdown
- [emoji](https://github.com/markdown-it/markdown-it-emoji)
- [subscript](https://github.com/markdown-it/markdown-it-sub)
- [superscript](https://github.com/markdown-it/markdown-it-sup)
- [container](https://github.com/markdown-it/markdown-it-container)
- [определенный список](https://github.com/markdown-it/markdown-it-deflist)
- [сокращение](https://github.com/markdown-it/markdown-it-abbr)
- [примечание внизу страницы](https://github.com/markdown-it/markdown-it-footnote)
- [вставка](https://github.com/CHENXCHEN/markdown-it-ins)
- [выделение](https://github.com/markdown-it/markdown-it-mark)
- [список задач](https://github.com/revin/markdown-it-task-lists)
- [выделение кода](https://github.com/isagalaev/highlight.js)
- [katex](https://github.com/Khan/KaTeX)
- [предварительный просмотр изображений](https://github.com/CHENXCHEN/markdown-it-images-preview)
- [toc](https://github.com/tylerlong/markdown-it-toc)
- можно добавить [получить объект markdown-it](./doc/cn/markdown)md) [другие расширения](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)
## Обновления
- [журнал обновлений](. /LOG.md)
## Сотрудники
- [CHENXCHEN](https://github.com/CHENXCHEN)
## Лицензия
mavonEditor является открытым исходным кодом и распространяется под лицензией MIT.
Copyright (c) 2017 hinesboy
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )