mavonEditor
v3.0.1
| VUE2 | |
|---|---|
| VUE3 |
Demostración para jsfiddle
Para ver más imágenes, haga clic aquí ...
$ 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 >Primero, cree vue-mavon-editor.js en los complementos de directorio del proyecto
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
Luego agregue la configuración de los complementos en nuxt.config.js
plugins : [
...
{ src : '@/plugins/vue-mavon-editor' , ssr : false }
] ,El último paso es introducirlo en la página o componente
< 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 >Para obtener más métodos de introducción, haga clic aquí ...
Cómo obtener y establecer un objeto Markdown-It ...
| nombre de nombre | tipo tipo | valor predeterminado predeterminado | Describe la descripción |
|---|---|---|---|
| valor | Cadena | Valor inicial | |
| idioma | Cadena | ZH-CN | Selección de idiomas, admite temporalmente ZH-CN: chino simplificado, zh-tw: chino oral, en: inglés, FR: francés, pt-br: portugués, ru: ruso, de: alemán, ja: japonés |
| fontisor | Cadena | 14px | Editar tamaño de texto del área |
| estilo de desplazamiento | Booleano | verdadero | Encienda el estilo de barra de desplazamiento (solo admite Chrome por el momento) |
| cajón | Booleano | verdadero | Encienda la sombra de la frontera |
| boxshadowstyle | Cadena | 0 2px 12px 0 RGBA (0, 0, 0, 0.1) | Estilo de sombra de borde |
| Transición | Booleano | verdadero | Si habilitar la animación de transición |
| Tool Barsbackground | Cadena | #ffffff | Color de fondo de la barra de herramientas |
| Previewbackground | Cadena | #fbfbfb | Vista previa de la caja Color de fondo |
| subcampo | Booleano | verdadero | Verdadero: Double Columns (Editar vista previa de la misma pantalla), False: columnas individuales (editar pantalla de división de vista previa) |
| DefaultOpen | Cadena | El área de visualización predeterminada se muestra cuando está en una sola columna ( subfield=false ).Editar: el área de edición se muestra de forma predeterminada. Vista previa: área de vista previa de visualización predeterminada Otro = editar | |
| marcador de posición | Cadena | Empiece a editar ... | Texto de solicitud predeterminado cuando el cuadro de entrada está vacío |
| editable | Booleano | verdadero | Si permitir la edición |
| Estilo de código | Cadena | github de código | Estilo de Markdown: GitHub predeterminado, esquema de color opcional |
| Barra de herramientas Flag | Booleano | verdadero | Si se muestra la barra de herramientas |
| navegación | Booleano | FALSO | Directorio de visualización predeterminado |
| atajo | Booleano | verdadero | Si habilitar las teclas de acceso directo |
| enfoque automático | Booleano | verdadero | Enfoque automático al cuadro de texto |
| ishljs | Booleano | verdadero | Código resaltado |
| Filter de imagen | función | nulo | La función de filtrado de imágenes tiene un parámetro File Object , que requiere que se devuelva un Boolean . true significa que el archivo es legal, y false significa que el archivo es ilegal. |
| ImageClick | función | nulo | Evento de clic de imagen, predeterminado se puede anular la vista previa, se puede anular |
| tabsize | Número | t | El valor predeterminado es t |
| html | Booleano | verdadero | Habilitar etiquetas HTML. Esta etiqueta siempre se ha incorporado a verdadero debido a razones históricas, pero se recomienda cerrarla sin usar etiquetas HTML. Puede eliminar por completo los problemas de seguridad. |
| xsoptions | Objeto | {} | La configuración de la regla XSS, habilitada por defecto, establece FALSE para apagar. Después de habilitar, las etiquetas HTML se filtrarán y todos los atributos de etiqueta HTML se filtrarán de forma predeterminada. Se recomienda configurar las blancas a la demanda para reducir la posibilidad de ser atacado. - Referencia de reglas personalizadas: https://jsxss.com/zh/options.html - Demo de referencia: Dev-Demo |
| Barras de herramientas | Objeto | El siguiente ejemplo | Barra de herramientas |
Todos los botones de barra de herramientas predeterminados están habilitados y se pasan objetos personalizados. Puede optar por habilitar algunos botones.
/*
例如: {
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 , // 预览
}Si necesita personalizar el botón Agregar barra de herramientas, puede usar los siguientes métodos
< 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 >| Nombre del método Nombre | parámetros parámetros | Describe la descripción |
|---|---|---|
| Cambiar | Cadena: valor, cadena: render | Evento de devolución de llamada que cambia en el área de edición (reiniciar: valore el resultado después de analizar por Markdown) |
| ahorrar | Cadena: valor, cadena: render | Evento de devolución de llamada de Ctrl + S (guarde la clave y active la devolución de llamada también) |
| pantalla completa | Booleano: estado, cadena: valor | Alterne el evento de devolución de llamada para la edición de pantalla completa (booleano: pantalla completa en el estado) |
| readelo | Booleano: estado, cadena: valor | Alternar el evento de devolución de llamada de la lectura inmersiva (Boolean: la lectura está habilitada) |
| htmlcode | Booleano: estado, cadena: valor | Verifique el evento de devolución de llamada del código fuente HTML (Boolean: el código fuente está habilitado) |
| subfieldToggle | Booleano: estado, cadena: valor | Cambie el evento de devolución de llamada de la edición de columna simple y doble (boolean: estado de apertura de doble columna) |
| PreviewToggle | Booleano: estado, cadena: valor | Alternar el evento de devolución de llamada editada de vista previa (Boolean: Preview Open Status) |
| helptoggle | Booleano: estado, cadena: valor | Ver el evento de devolución de llamada de ayuda (Boolean: la ayuda está habilitada) |
| navegación | Booleano: estado, cadena: valor | Cambie el evento de devolución de llamada del directorio de navegación (Boolean: la navegación está habilitada) |
| imgadd | Número: Pos, archivo: IMGFILE | Agregue el evento de devolución de llamada al archivo de imagen (pos: la ubicación de la imagen en la lista, archivo: objeto de archivo) |
| imgdel | Array (2): [Número: Pos, archivo: IMGFILE] | Evento de devolución de llamada del archivo de archivo de imagen (Array (2): una matriz de dos elementos, la primera posición es la posición de la imagen en la lista y la segunda posición es el objeto de archivo) |
Si no necesita resaltar el código destacado, debe establecer iShljs en falso
Activar el código resaltar los accesorios
<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor> Para optimizar el volumen del complemento, los siguientes archivos utilizarán enlaces externos cdnjs de forma predeterminada desde v2.4.2 :
highlight.jsgithub-markdown-csskatex ( v2.4.7 ) Código que resalta los archivos de análisis de lenguaje en highlight.js y los estilos de resaltado de código se cargarán a pedido cuando se usen. github-markdown-css y katex solo se cargarán cuando mounted
Aviso : el esquema de color opcional y los idiomas compatibles se exportan desde resaltados. JS/9.12.0
Sin usar CDN, carga local a pedido, haga clic aquí ...
< 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 >Para obtener detalles sobre la carga de imágenes, haga clic aquí ...
| llave | cinturón de llave | Función |
|---|---|---|
| F8 | 119 | Activar/desactivar la navegación |
| F9 | 120 | Vista previa/editar alternar |
| F10 | 121 | Encender/apagar la pantalla completa |
| F11 | 122 | Encender/apagar el modo de lectura |
| F12 | 123 | Continción de columna única/doble columna |
| PESTAÑA | 9 | sangría |
| Ctrl + S | 17 + 83 | Gatillo guardar |
| Ctrl + D | 17 + 68 | Eliminar filas seleccionadas |
| CTRL + Z | 17 + 90 | Anterior |
| CTRL + Y | 17 + 89 | Siguiente paso |
| Ctrl + breakspace | 17 + 8 | Borrar edición |
| Ctrl + B | 17 + 66 | **Atrevido** |
| Ctrl + I | 17 + 73 | *Cursiva* |
| CTRL + H | 17 + 72 | #Título |
| Ctrl + 1 | 17 + 97 o 49 | #Título |
| Ctrl + 2 | 17 + 98 o 50 | ## Título |
| Ctrl + 3 | 17 + 99 o 51 | ### Título |
| Ctrl + 4 | 17 + 100 o 52 | #### Título |
| Ctrl + 5 | 17 + 101 o 53 | ##### Título |
| Ctrl + 6 | 17 + 102 o 54 | ###### Título |
| Ctrl + u | 17 + 85 | ++ sin cesar ++ |
| CTRL + M | 17 + 77 | == etiqueta == |
| CTRL + Q | 17 + 81 | > Citas |
| CTRL + O | 17 + 79 | 1. Lista ordenada |
| Ctrl + L | 17 + 76 | [Título del enlace] (dirección de enlace) |
| Ctrl + Alt + S | 17 + 18 + 83 | ^Marca de la esquina superior^ |
| Ctrl + Alt + U | 17 + 18 + 85 | - Lista desordenada |
| Ctrl + Alt + C | 17 + 18 + 67 | `` `Bloque de código |
| Ctrl + Alt + L | 17 + 18 + 76 | ! [Título de la imagen] (enlace de imagen) |
| Ctrl + Alt + T | 17 + 18 + 84 | hoja |
| Ctrl + Shift + S | 17 + 16 + 83 | |
| Ctrl + Shift + D | 17 + 16 + 68 | ~~ Marcado medio ~~ |
| Ctrl + Shift + C | 17 + 16 + 67 | Centro |
| Ctrl + Shift + L | 17 + 16 + 76 | A la izquierda |
| Ctrl + Shift + R | 17 + 16 + 82 | A la derecha |
| CHUART + pestaña | 16 + 9 | Cancelar la hendidura |
markdown-it
textárea automática
Se pueden introducir otros complementos de sintaxis obteniendo el objeto Markdown-It. Se pueden introducir otros complementos de sintaxis obteniendo el objeto Markdown-It.
Mavoneditor es de código abierto y lanzado bajo la licencia MIT.
Copyright (c) 2017 Hinesboy
