mavonEditor
v3.0.1
| Vue2 | |
|---|---|
| Vue3 |
Démo pour jsfiddle
Pour voir plus d'images, cliquez ici ...
$ 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 >Créez d'abord Vue-Mavon-Editor.js dans les plugins du répertoire du projet
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
Puis ajoutez la configuration des plugins dans nuxt.config.js
plugins : [
...
{ src : '@/plugins/vue-mavon-editor' , ssr : false }
] ,La dernière étape consiste à l'introduire dans la page ou le composant
< 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 >Pour plus de méthodes d'introduction, cliquez ici ...
Comment obtenir et définir un objet Markdown-it ...
| nom de nom | type de type | Valeur par défaut par défaut | Décrire la description |
|---|---|---|---|
| valeur | Chaîne | Valeur initiale | |
| langue | Chaîne | zh-cn | Sélection de la langue, soutient temporairement ZH-CN: chinois simplifié, ZH-TW: Chinois oral, EN: Anglais, Fr: Français, PT-BR: Portugais, Ru: Russe, DE: ALLEMAN, JA: Japonais |
| s'adapter | Chaîne | 14px | Modifier la taille du texte de la zone |
| faire défiler | Booléen | vrai | Allumez le style de barre de défilement (ne supporte que Chrome pour le moment) |
| boxshadow | Booléen | vrai | Allumez l'ombre de la frontière |
| boxshadowstyle | Chaîne | 0 2px 12px 0 rgba (0, 0, 0, 0,1) | Style de l'ombre de la frontière |
| Transition | Booléen | vrai | S'il faut activer l'animation de transition |
| Toolrsbackground | Chaîne | #ffffff | Couleur d'arrière-plan de la barre d'outils |
| prévisualbackground | Chaîne | #fbfbfb | Couleur d'arrière-plan de la boîte d'aperçu |
| sous-champ | Booléen | vrai | True: Double colonnes (modifier l'aperçu du même écran), FAUX: Colonnes simples (modifier l'écran Split Aperçu) |
| par défaut | Chaîne | La zone d'affichage par défaut s'affiche dans une seule colonne ( subfield=false ).Edit: la zone d'édition s'affiche par défaut. Aperçu: Affichage par défaut Aperçu Aperçu Autre = Modifier | |
| espace réservé | Chaîne | Commencez à éditer ... | Texte d'invite par défaut lorsque la zone d'entrée est vide |
| modifiable | Booléen | vrai | S'il faut permettre l'édition |
| codestation | Chaîne | code-github | Style Markdown: github par défaut, schéma de couleurs en option |
| ToolrsFlag | Booléen | vrai | Si la barre d'outils est affichée |
| navigation | Booléen | FAUX | Répertoire d'affichage par défaut |
| raccourci | Booléen | vrai | S'il faut activer les clés de raccourci |
| autofocus | Booléen | vrai | Focus automatique sur la zone de texte |
| ISHLJS | Booléen | vrai | Code mis en surbrillance |
| image | fonction | nul | La fonction de filtrage d'image a un paramètre File Object , obligeant un Boolean à retourner. true signifie que le dossier est légal et false signifie que le dossier est illégal. |
| imaginer | fonction | nul | L'événement de clic d'image, la valeur par défaut est un aperçu, peut être remplacé |
| Tabsice | Nombre | t | La valeur par défaut est t |
| html | Booléen | vrai | Activez les balises HTML. Cette balise a toujours fait défaut de vrai pour des raisons historiques, mais il est recommandé de le fermer sans utiliser de balises HTML. Il peut éliminer complètement les problèmes de sécurité. |
| XSSOPTIONS | Objet | {} | La configuration de la règle XSS, activée par défaut, SET FALSE pour désactiver. Après activé, les balises HTML seront filtrées et tous les attributs de balises HTML seront filtrés par défaut. Il est recommandé de configurer les listes blanches à la demande pour réduire la possibilité d'être attaquée. - Référence de règle personnalisée: https://jsxss.com/zh/options.html - Demo de référence: Dev-Demo |
| Barres d'outils | Objet | L'exemple suivant | Barre d'outils |
Tous les boutons de barre d'outils par défaut sont activés et les objets personnalisés sont passés. Vous pouvez choisir d'activer certains boutons.
/*
例如: {
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 vous avez besoin de personnaliser le bouton Ajouter la barre d'outils, vous pouvez utiliser les méthodes suivantes
< 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 >| Nom Méthode Nom | paramètres paramètres | Décrire la description |
|---|---|---|
| Changement | String: valeur, chaîne: rendu | Événement de rappel qui change dans la zone d'édition (REENDER: VALAGE LE RÉSULTAT Après l'analyse par Markdown) |
| sauvegarder | String: valeur, chaîne: rendu | Événement de rappel de Ctrl + S (Enregistrez la clé et déclenchez également le rappel) |
| plein écran | Booléen: statut, chaîne: valeur | Basculez l'événement de rappel pour l'édition complète (boolean: plein écran à l'état) |
| réadmodel | Booléen: statut, chaîne: valeur | Basculez l'événement de rappel de la lecture immersive (booléen: la lecture est activée) |
| htmlcode | Booléen: statut, chaîne: valeur | Vérifiez l'événement de rappel du code source HTML (boolean: le code source est activé) |
| sous-champ | Booléen: statut, chaîne: valeur | Communiquez l'événement de rappel de l'édition simple et double colonne (boolean: statut ouvert à double colonne) |
| préviewtoggle | Booléen: statut, chaîne: valeur | Basculez l'événement de rappel édité en prévisualisation (Boolean: Aperçu de l'état ouvert) |
| se faire une entrave | Booléen: statut, chaîne: valeur | Consultez l'événement de rappel d'aide (boolean: l'aide est activée) |
| NavigationToggle | Booléen: statut, chaîne: valeur | Communiquez l'événement de rappel du répertoire de navigation (booléen: la navigation est activée) |
| imgadd | Numéro: pos, fichier: imgfile | Ajoutez un événement de rappel au fichier image (pos: l'emplacement de l'image dans la liste, fichier: objet de fichier) |
| imgdel | Array (2): [numéro: pos, fichier: imgfile] | Événement de rappel de suppression de fichiers d'image (Array (2): un tableau de deux éléments, la première position est la position de l'image dans la liste et la deuxième position est l'objet de fichier) |
Si vous n'avez pas besoin de mettre en surbrillance le code de surbrillance, vous devez définir ISHLJS sur FALSE
Allumez le code sur souligne les accessoires
<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor> Pour optimiser le volume du plugin, les fichiers suivants utiliseront les liens externes cdnjs par défaut de la v2.4.2 :
highlight.jsgithub-markdown-csskatex ( v2.4.7 ) Le code mettant en évidence les fichiers d'analyse linguistique dans highlight.js et les styles de mise en évidence du code seront chargés à la demande lorsqu'ils sont utilisés. github-markdown-css et katex ne seront chargés que lorsqu'ils mounted
AVIS : Le schéma de couleurs facultatif et les langages pris en charge sont exportés de Highlight.js / 9.12.0
Sans utiliser CDN, le chargement local sur demande Cliquez ici ...
< 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 >Pour plus de détails sur les photos de téléchargement, cliquez ici ...
| clé | keycode | Fonction |
|---|---|---|
| F8 | 119 | Allumer / désactiver la navigation |
| F9 | 120 | Aperçu / modifier la bascule |
| F10 | 121 | Allumer / désactiver l'écran |
| F11 | 122 | Mode de lecture d'allumage / désactivation |
| F12 | 123 | Commutation de colonne unique / double colonne |
| LANGUETTE | 9 | échancrure |
| Ctrl + s | 17 + 83 | Déclencher une sauvegarde |
| Ctrl + d | 17 + 68 | Supprimer les lignes sélectionnées |
| Ctrl + z | 17 + 90 | Précédent |
| Ctrl + y | 17 + 89 | Prochaine étape |
| Ctrl + Breakspace | 17 + 8 | Modifier |
| Ctrl + b | 17 + 66 | **Audacieux** |
| Ctrl + i | 17 + 73 | *Italique* |
| Ctrl + h | 17 + 72 | #Titre |
| Ctrl + 1 | 17 + 97 ou 49 | #Titre |
| Ctrl + 2 | 17 + 98 ou 50 | ## Titre |
| Ctrl + 3 | 17 + 99 ou 51 | ### Titre |
| Ctrl + 4 | 17 + 100 ou 52 | #### Titre |
| Ctrl + 5 | 17 + 101 ou 53 | ##### Titre |
| Ctrl + 6 | 17 + 102 ou 54 | ###### Titre |
| Ctrl + u | 17 + 85 | ++ Unsembore ++ |
| Ctrl + m | 17 + 77 | == TAG == |
| Ctrl + q | 17 + 81 | > Citations |
| Ctrl + o | 17 + 79 | 1. Liste commandée |
| Ctrl + l | 17 + 76 | [Titre du lien] (adresse de liaison) |
| Ctrl + alt + s | 17 + 18 + 83 | ^ Marque du coin supérieur ^ |
| Ctrl + alt + u | 17 + 18 + 85 | - Liste non ordonnée |
| Ctrl + alt + c | 17 + 18 + 67 | `` '' Bloc de code |
| Ctrl + alt + l | 17 + 18 + 76 | ! [Titre de l'image] (lien photo) |
| Ctrl + alt + t | 17 + 18 + 84 | feuille |
| Ctrl + shift + s | 17 + 16 + 83 | |
| Ctrl + Shift + D | 17 + 16 + 68 | ~~ Marquage moyen ~~ |
| Ctrl + shift + c | 17 + 16 + 67 | Centre |
| Ctrl + Shift + L | 17 + 16 + 76 | À gauche |
| Ctrl + shift + r | 17 + 16 + 82 | Sur la droite |
| Onglet Shift + | 16 + 9 | Annuler l'indentation |
Markdown-it
auto-textarea
D'autres plugins de syntaxe peuvent être introduits en obtenant l'objet Markdown-IT. D'autres plugins de syntaxe peuvent être introduits en obtenant l'objet Markdown-IT.
MavoneDitor est open source et libéré sous la licence du MIT.
Copyright (C) 2017 Hinesboy
