mavonEditor
v3.0.1
| Vue2 | |
|---|---|
| VUE3 |
Демонстрация для jsfiddle
Чтобы просмотреть больше картин, нажмите здесь ...
$ 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 >Во-первых, создайте Vue-Mavon-editor.js в плагинах каталога проекта
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
Затем добавьте конфигурацию плагинов в nuxt.config.js
plugins : [
...
{ src : '@/plugins/vue-mavon-editor' , ssr : false }
] ,Последний шаг - представить его на странице или компоненте
< template >
< div class = " mavonEditor " >
< no-ssr >
< mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
</ no-ssr >
</ div >
</ template >
< script >
export default {
data () {
return {
markdownOption : {
bold : true , // 粗体
... // 更多配置
},
handbook : " #### how to use mavonEditor in nuxt.js "
};
}
};
</ script >
< style scoped>
.mavonEditor {
width : 100 % ;
height : 100 % ;
}
</ style >Для получения дополнительных методов введения нажмите здесь ...
Как получить и установить объект Markdown-It ...
| имя имя | Тип типа | Значение по умолчанию по умолчанию | Опишите описание |
|---|---|---|---|
| ценить | Нить | Начальное значение | |
| язык | Нить | ZH-CN | Выбор языка, временно поддерживает ZH-CN: упрощенный китайский, ZH-TW: устный китайский, EN: английский, FR: Французский, PT-BR: Португальский, RU: русский, DE: немецкий, JA: японский |
| Fontsize | Нить | 14px | Редактировать размер текста области |
| Scrollstyle | Логический | истинный | Включите стиль прокрутки (только на данный момент поддержите Chrome) |
| коробочка | Логический | истинный | Включить пограничную тень |
| Boxshadowstyle | Нить | 0 2px 12px 0 rgba (0, 0, 0, 0,1) | Пограничный стиль тени |
| Переход | Логический | истинный | Сообщите ли анимация перехода |
| Панипалбарсбанс | Нить | #ffffff | Панель инструментов цвет фона |
| Предварительный просмотр | Нить | #fbfbfb | Предварительный просмотр фона фона |
| подполе | Логический | истинный | True: Double Columns (редактировать предварительный просмотр того же экрана), false: одиночные столбцы (редактировать расщепленный экран предварительного просмотра) |
| Defaultopen | Нить | Область отображения по умолчанию отображается в одном столбце ( subfield=false ).Редактировать: область редактирования отображается по умолчанию. Предварительный просмотр: область предварительного просмотра по умолчанию другого = редактировать | |
| заполнитель | Нить | Начните редактировать ... | Текст приглашения по умолчанию, когда поле ввода пусто |
| редактируемый | Логический | истинный | Разрешать ли редактировать |
| Codestyle | Нить | код-гитуб | Стиль разметки: GitHub по умолчанию, необязательная цветовая схема |
| Пабурсфлаг | Логический | истинный | Отображается ли панель инструментов |
| навигация | Логический | ЛОЖЬ | Каталог отображения по умолчанию |
| ярлык | Логический | истинный | Включить ли клавиши ярлыков |
| Автофокус | Логический | истинный | Автоматический фокус на текстовое поле |
| ishljs | Логический | истинный | Код выделен |
| Imagefilter | функция | нулевой | Функция фильтрации изображения имеет параметр File Object , требующий возврата Boolean . true означает, что файл является законным, а false означает, что файл является незаконным. |
| ImageClick | функция | нулевой | Событие щелчка изображения, по умолчанию предварительное просмотр, может быть переопределено |
| вкладка | Число | t | По умолчанию t |
| HTML | Логический | истинный | Включить теги HTML. Этот тег всегда дефоруется по правде по историческим причинам, но рекомендуется закрыть его без использования HTML -тегов. Это может полностью устранить проблемы безопасности. |
| xssoptions | Объект | {} | Конфигурация правил XSS, включенная по умолчанию, установите false для отключения. После включения теги HTML будут отфильтрованы, и все атрибуты тега HTML будут отфильтрованы по умолчанию. Рекомендуется настраивать белые списки на требование, чтобы уменьшить возможность атаки. - Пользовательская ссылка на правило: https://jsxss.com/zh/options.html - Справочная демонстрация: dev-demo |
| Панели инструментов | Объект | Следующий пример | Панель инструментов |
Все кнопки панели инструментов по умолчанию включены, и настраиваемые объекты передаются. Вы можете выбрать включение некоторых кнопок.
/*
例如: {
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 , // 预览
}Если вам нужно настроить кнопку «Добавить панель инструментов», вы можете использовать следующие методы
< mavon-editor >
<!-- 左工具栏前加入自定义按钮 -->
< template slot = "left-toolbar-before" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 左工具栏后加入自定义按钮 -->
< template slot = "left-toolbar-after" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 右工具栏前加入自定义按钮 -->
< template slot = "right-toolbar-before" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
<!-- 右工具栏后加入自定义按钮 -->
< template slot = "right-toolbar-after" >
< button
type = "button"
@ click = "$click('test')"
class = "op-icon fa fa-mavon-align-left"
aria-hidden = "true"
title = "自定义"
> </ button >
</ template >
</ mavon-editor >| Имя метода Имя | параметры параметров | Опишите описание |
|---|---|---|
| Изменять | Строка: значение, строка: рендерин | Событие обратного вызова, которое изменяется в области редактирования (Reender: оценка результата после анализа от Markdown) |
| сохранять | Строка: значение, строка: рендерин | Событие CALLBACK CTRL + S (сохраните клавишу и запустите обратный вызов) |
| полноэкранный | Логический: статус, строка: значение | Переключить событие обратного вызова для полноэкранного редактирования (Boolean: полноэкранная на штате) |
| ReadModel | Логический: статус, строка: значение | Переключить событие обратного вызова иммерсивного чтения (Boolean: чтение включено) |
| htmlcode | Логический: статус, строка: значение | Проверьте событие обратного вызова исходного кода HTML (Boolean: исходный код включен) |
| SubfieldToggle | Логический: статус, строка: значение | Переключить событие обратного вызова однократного и двойного редактирования столбцов (Boolean: Double Column Open Status) |
| PreviewToggle | Логический: статус, строка: значение | Переключить предварительное отредактированное событие обратного вызова (Boolean: Предварительный просмотр открытого статуса) |
| Гелптоггл | Логический: статус, строка: значение | Посмотреть событие обратного вызова справки (Boolean: помощь включена) |
| NavigationToggle | Логический: статус, строка: значение | Переключить событие обратного вызова навигационного каталога (Boolean: Навигация включена) |
| Имгадд | Номер: pos, файл: imgfile | Добавить событие обратного вызова в файл изображения (POS: местоположение изображения в списке, файл: файл объект) |
| Imgdel | Массив (2): [номер: pos, файл: imgfile] | Событие обратного вызова файла файла изображения (массив (2): массив двух элементов, первая позиция - это позиция изображения в списке, а вторая позиция - это объект файла) |
Если вам не нужно выделять код выделения, вы должны установить Ishljs на false
Включить код выделения реквизита
<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor> Чтобы оптимизировать громкость плагина, в следующих файлах будут использовать внешние ссылки cdnjs по умолчанию из v2.4.2 :
highlight.jsgithub-markdown-csskatex ( v2.4.7 ) Код подчеркивает файлы анализа языка в highlight.js , а стили выделения кода будут загружены по требованию при использовании. github-markdown-css и katex будут загружены только при mounted
Уведомление : необязательная цветовая схема и поддерживаемые языки экспортируются из hoald.js/9.12.0
Без использования CDN локальная загрузка по требованию нажмите здесь ...
< template >
< mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export 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替换到文本原位置 -> 
/**
* $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);
})
}
}
}
</ script >Для получения подробной информации о загрузке изображений, нажмите здесь ...
| ключ | ключевой код | Функция |
|---|---|---|
| F8 | 119 | Включите навигацию/выключение |
| F9 | 120 | Предварительный просмотр/редактировать переключение |
| F10 | 121 | Включить/выключить полный экран |
| F11 | 122 | Включить/выключить режим чтения |
| F12 | 123 | Переключение с одним столбцом/двойным столбцом |
| Вкладка | 9 | отступление |
| Ctrl + s | 17 + 83 | Триггер сохранить |
| Ctrl + d | 17 + 68 | Удалить выбранные ряды |
| Ctrl + z | 17 + 90 | Предыдущий |
| Ctrl + y | 17 + 89 | Следующий шаг |
| Ctrl + Breakspace | 17 + 8 | Чистое редактирование |
| Ctrl + b | 17 + 66 | **Смелый** |
| Ctrl + i | 17 + 73 | *Курсив* |
| Ctrl + H. | 17 + 72 | #Заголовок |
| Ctrl + 1 | 17 + 97 или 49 | #Заголовок |
| Ctrl + 2 | 17 + 98 или 50 | ## Заголовок |
| Ctrl + 3 | 17 + 99 или 51 | ### Заголовок |
| Ctrl + 4 | 17 + 100 или 52 | #### Заголовок |
| Ctrl + 5 | 17 + 101 или 53 | ##### Заголовок |
| Ctrl + 6 | 17 + 102 или 54 | ###### Заголовок |
| Ctrl + U. | 17 + 85 | ++ unscore ++ |
| Ctrl + M. | 17 + 77 | == Tag == |
| Ctrl + q | 17 + 81 | > Цитаты |
| Ctrl + o | 17 + 79 | 1. Заказанный список |
| Ctrl + L. | 17 + 76 | [Название ссылки] (адрес ссылки) |
| Ctrl + alt + s | 17 + 18 + 83 | ^Верхний угловой отметок^ |
| 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 | |
| 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
Auto-Textarea
Другие синтаксические плагины могут быть введены путем получения объекта Markdown-IT. Другие синтаксические плагины могут быть введены путем получения объекта Markdown-IT.
Mavoneditor находится с открытым исходным кодом и выпущен по лицензии MIT.
Copyright (C) 2017 Hinesboy
