mavonEditor
v3.0.1
| VUE2 | |
|---|---|
| VUE3 |
Demo für JSFiddle
Um weitere Bilder anzuzeigen, klicken Sie hier ...
$ 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 >Erstellen Sie zunächst Vue-Mavon-editor.js im Projektverzeichnis-Plugins
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
Fügen Sie dann die Plugins -Konfiguration in nuxt.config.js hinzu
plugins : [
...
{ src : '@/plugins/vue-mavon-editor' , ssr : false }
] ,Der letzte Schritt besteht darin, es in die Seite oder die Komponente vorzustellen
< 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 >Für weitere Einführungsmethoden klicken Sie hier ...
Wie man ein Markdown-It-Objekt bekommt und festlegt ...
| Name Name | Typtyp | Standardwertwert | Beschreibung beschreiben |
|---|---|---|---|
| Wert | Saite | Anfangswert | |
| Sprache | Saite | ZH-CN | Sprachauswahl, unterstützt vorübergehend ZH-CN: vereinfachtes Chinesisch, ZH-TW: Oral Chinese, EN: Englisch, Fr. |
| Schriftgröße | Saite | 14px | Bereiche Textgröße bearbeiten |
| Scrollstyle | Boolean | WAHR | Schalten Sie den Scrollbar -Stil ein (unterstützen Sie nur Chrome vorerst) |
| Boxshadow | Boolean | WAHR | Randschatten einschalten |
| Boxshadowstyle | Saite | 0 2px 12px 0 RGBA (0, 0, 0, 0,1) | Grenze Schattenstil |
| Übergang | Boolean | WAHR | Ob die Übergangsanimation aktiviert werden soll |
| Symbolleistenbackground | Saite | #ffffff | Werkzeugleiste Hintergrundfarbe |
| Vorschauplatz | Saite | #fbfbfb | Vorschauerbox Hintergrundfarbe |
| Unterfeld | Boolean | WAHR | True: Doppelspalten (Vorschau der Vorschau desselben Bildschirms bearbeiten), Falsch: Einzelspalten (Vorschau -Split -Bildschirm bearbeiten) |
| Defaultopen | Saite | Der Standardanzeigebereich wird in einer einzigen Spalte angezeigt ( subfield=false ).Bearbeiten: Der Bearbeitungsbereich wird standardmäßig angezeigt. Vorschau: Standardanzeige Vorschau -Bereich Andere = Bearbeiten | |
| Platzhalter | Saite | Anfangen zu bearbeiten ... | Standardeingabetext Wenn das Eingabefeld leer ist |
| bearbeitet | Boolean | WAHR | Ob die Bearbeitung zulässt |
| Codestyle | Saite | Code-Github | Markdown -Stil: Standard GitHub, optionales Farbschema |
| Symbolleistenflag | Boolean | WAHR | Ob die Symbolleiste angezeigt wird |
| Navigation | Boolean | FALSCH | Standard -Anzeigeverzeichnis |
| Abkürzung | Boolean | WAHR | Ob Sie Abkürzungsschlüssel aktivieren möchten |
| Autofokus | Boolean | WAHR | Automatischer Fokus auf Textfeld |
| Ihljs | Boolean | WAHR | Code hervorgehoben |
| Bildfilter | Funktion | NULL | Die Bildfilterfunktion hat einen File Object , der einen Boolean zurückgeben muss. true bedeutet, dass die Datei legal ist und false bedeutet die Datei illegal. |
| ImageClick | Funktion | NULL | Bildklick -Ereignis, Standardeinstellung ist Vorschau, kann überschrieben werden |
| tabSize | Nummer | T | Der Standard ist t |
| html | Boolean | WAHR | Aktivieren Sie HTML -Tags. Dieses Tag hat sich aus historischen Gründen stets standardmäßig truediert, es wird jedoch empfohlen, es ohne HTML -Tags zu schließen. Es kann Sicherheitsprobleme vollständig beseitigen. |
| xssoptionen | Objekt | {} | Die standardmäßige XSS -Regelkonfiguration, die standardmäßig aktiviert ist, haben Sie false fest gesetzt, um sie auszuschalten. Nach Aktivierung werden HTML -Tags gefiltert und alle HTML -Tag -Attribute werden standardmäßig filtriert. Es wird empfohlen, Whitelisten auf Demand zu konfigurieren, um die Möglichkeit einer Angriffszahlung zu verringern. - Benutzerdefinierte Regelreferenz: https://jsxs.com/zh/options.html - Referenzdemo: Dev-Demo |
| Symbolleisten | Objekt | Das folgende Beispiel | Symbolleiste |
Alle Standard -Symbolleistenschaltflächen sind aktiviert und benutzerdefinierte Objekte werden übergeben. Sie können einige Schaltflächen aktivieren.
/*
例如: {
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 , // 预览
}Wenn Sie die Schaltfläche "Symbolleiste hinzufügen" anpassen müssen, können Sie die folgenden Methoden verwenden
< 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 >| Name Methode Name | Parameter Parameter | Beschreibung beschreiben |
|---|---|---|
| Ändern | Zeichenfolge: Wert, Zeichenfolge: Rendern | Rückrufereignis, das sich im Bearbeitungsbereich ändert (Reender: Bewerten Sie das Ergebnis nach der Parsen durch Markdown) |
| speichern | Zeichenfolge: Wert, Zeichenfolge: Rendern | Rückrufereignis von STRG + S (Speichern Sie den Schlüssel und auslösen Sie auch den Rückruf) |
| Vollbild | Boolean: Status, Zeichenfolge: Wert | Schalten Sie das Callback-Ereignis für die Bearbeitung des Vollbilds um (Boolean: Vollbild auf dem Status). |
| Readmodel | Boolean: Status, Zeichenfolge: Wert | Schalten Sie das Rückrufereignis eines immersiven Lesens um (Boolean: Lesen ist aktiviert). |
| htmlcode | Boolean: Status, Zeichenfolge: Wert | Überprüfen Sie den Rückrufereignis des HTML -Quellcodes (Boolean: Quellcode ist aktiviert). |
| SubfieldToggle | Boolean: Status, Zeichenfolge: Wert | Wechseln Sie das Rückrufereignis einer einzelnen und doppelten Spaltenbearbeitung (Boolean: Double Column Open Status). |
| Vorschau | Boolean: Status, Zeichenfolge: Wert | Schalten Sie das vorschau bearbeitete Rückrufereignis (Boolean: Vorschau Open Status). |
| Helptoggle | Boolean: Status, Zeichenfolge: Wert | Sehen Sie sich das Help Callback -Event an (Boolean: Hilfe ist aktiviert). |
| NavigationStoggle | Boolean: Status, Zeichenfolge: Wert | Wechseln Sie das Rückrufereignis des Navigationsverzeichnisses (Boolean: Navigation ist aktiviert). |
| Imgadd | Nummer: POS, Datei: ImgFile | Hinzufügen von Rückrufereignis zur Bilddatei (POS: Der Speicherort des Bildes in der Liste, Datei: Dateiobjekt) |
| Imgdel | Array (2): [Nummer: POS, Datei: ImgFile] | Bilddatei -Löschungsereignis (Array (2): Ein Array von zwei Elementen, die erste Position ist die Position des Bildes in der Liste, und die zweite Position ist das Dateiobjekt) |
Wenn Sie den Highlight -Code nicht hervorheben müssen, sollten Sie ISHLJs auf false festlegen
Schalten Sie die Code -Highlight -Requisiten ein
<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor> Um das Plugin -Volumen zu optimieren, verwenden die folgenden Dateien die externen cdnjs -Links standardmäßig von v2.4.2 :
highlight.jsgithub-markdown-csskatex ( v2.4.7 ) Code -Hervorhebung von Sprachvorrichtendateien in highlight.js und Code -Hervorhebungsstilen werden bei der Verwendung auf Bedarf geladen. github-markdown-css und katex werden nur beim mounted geladen
Hinweis : Optionales Farbschema und unterstützte Sprachen werden von highlight.js/9.12.0 exportiert
Ohne CDN zu verwenden, klicken Sie hier auf lokaler Ladeverformung ...
< 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 >Für Details zum Hochladen von Bildern klicken Sie hier ...
| Schlüssel | Schlüsselcode | Funktion |
|---|---|---|
| F8 | 119 | Navigation ein- und ausschalten |
| F9 | 120 | Vorschau/Bearbeiten umschalten |
| F10 | 121 | Ein- und Ausschalten des Vollbildes ein-/ausschalten |
| F11 | 122 | Ein-/Aus -Lesemodus ein-/ausschalten |
| F12 | 123 | Einzelspalte/Doppelspaltenschaltung |
| TAB | 9 | Vertiefung |
| Strg + s | 17 + 83 | Auslöser speichern |
| Strg + d | 17 + 68 | Ausgewählte Zeilen löschen |
| Strg + z | 17 + 90 | Vorherige |
| Strg + y | 17 + 89 | Nächster Schritt |
| Strg + Breakspace | 17 + 8 | Klare Bearbeitung |
| Strg + b | 17 + 66 | **Deutlich** |
| Strg + i | 17 + 73 | *Kursivschrift* |
| Strg + h | 17 + 72 | #Titel |
| Strg + 1 | 17 + 97 oder 49 | #Titel |
| Strg + 2 | 17 + 98 oder 50 | ## Titel |
| Strg + 3 | 17 + 99 oder 51 | ### Titel |
| Strg + 4 | 17 + 100 oder 52 | #### Titel |
| Strg + 5 | 17 + 101 oder 53 | ##### Titel |
| Strg + 6 | 17 + 102 oder 54 | ###### Title |
| Strg + u | 17 + 85 | ++ Unscore ++ |
| Strg + m | 17 + 77 | == tag == |
| Strg + q | 17 + 81 | > Zitate |
| Strg + o | 17 + 79 | 1. Bestellte Liste |
| Strg + l | 17 + 76 | [Linktitel] (Linkadresse) |
| Strg + Alt + s | 17 + 18 + 83 | ^Obere Ecke Mark^ |
| Strg + Alt + U. | 17 + 18 + 85 | - Unordentliche Liste |
| Strg + Alt + C. | 17 + 18 + 67 | `` `Code Block |
| Strg + Alt + l | 17 + 18 + 76 | ! [Bild -Titel] (Bildlink) |
| Strg + Alt + t | 17 + 18 + 84 | Blatt |
| Strg + Verschiebung + s | 17 + 16 + 83 | |
| Strg + Verschiebung + D. | 17 + 16 + 68 | ~~ Middle Markierung ~~ |
| Strg + Verschiebung + C. | 17 + 16 + 67 | Center |
| Strg + Verschiebung + l | 17 + 16 + 76 | Auf der linken Seite |
| Strg + Verschiebung + r | 17 + 16 + 82 | Rechts |
| Verschiebung + Registerkarte | 16 + 9 | Eindrückung abbrechen |
Markdown-it
Auto-Textea
Andere Syntax-Plugins können eingeführt werden, indem das Markdown-It-Objekt erhalten wird. Andere Syntax-Plugins können eingeführt werden, indem das Markdown-It-Objekt erhalten wird.
Mavoneditor ist Open Source und unter der MIT -Lizenz veröffentlicht.
Copyright (C) 2017 Hinesboy
