mavonEditor下載mavonEditor源代碼下載

mavonEditor

Vue2
Vue3

English Documents

Demo for jsfiddle

example (圖片展示)

PC

查看更多圖片點擊這裡...

Install mavon-editor (安裝)

 $ npm install mavon-editor --save

Use (如何引入)

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 >

如何在nuxt.js 中使用

首先在工程目錄plugins 下新建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配置

  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對象...

API 文檔

props

name 名稱	type 類型	default 默認值	describe 描述
value	String		初始值
language	String	zh-CN	語言選擇，暫支持zh-CN: 簡體中文, zh-TW: 正體中文， en: 英文， fr: 法語， pt-BR: 葡萄牙語， ru: 俄語， de: 德語， ja: 日語
fontSize	String	14px	編輯區域文字大小
scrollStyle	Boolean	true	開啟滾動條樣式(暫時僅支持chrome)
boxShadow	Boolean	true	開啟邊框陰影
boxShadowStyle	String	0 2px 12px 0 rgba(0, 0, 0, 0.1)	邊框陰影樣式
transition	Boolean	true	是否開啟過渡動畫
toolbarsBackground	String	#ffffff	工具欄背景顏色
previewBackground	String	#fbfbfb	預覽框背景顏色
subfield	Boolean	true	true：雙欄(編輯預覽同屏)， false：單欄(編輯預覽分屏)
defaultOpen	String		在單欄（ `subfield=false` ）時默認展示區域. edit：默認展示編輯區域， preview：默認展示預覽區域其他= edit
placeholder	String	開始編輯...	輸入框為空時默認提示文本
editable	Boolean	true	是否允許編輯
codeStyle	String	code-github	markdown樣式：默認github, 可選配色方案
toolbarsFlag	Boolean	true	工具欄是否顯示
navigation	Boolean	false	默認展示目錄
shortCut	Boolean	true	是否啟用快捷鍵
autofocus	Boolean	true	自動聚焦到文本框
ishljs	Boolean	true	代碼高亮
imageFilter	function	null	圖片過濾函數，參數為一個`File Object` ，要求返回一個`Boolean` , `true`表示文件合法， `false`表示文件不合法
imageClick	function	null	圖片點擊事件，默認為預覽，可覆蓋
tabSize	Number	t	tab轉化為幾個空格，默認為t
html	Boolean	true	啟用HTML標籤，因為歷史原因這個標記一直默認為true，但建議不使用HTML標籤就關閉它，它能徹底杜絕安全問題。
xssOptions	Object	{}	xss規則配置, 默認開啟，設置false可以關閉，開啟後會對HTML標籤進行過濾，默認過濾所有HTML標籤屬性，建議按需配置白名單減少被攻擊的可能。 - 自定義規則參考: https://jsxss.com/zh/options.html - 參考DEMO: dev-demo
toolbars	Object	如下例	工具欄

toolbars

默認工具欄按鈕全部開啟, 傳入自定義對象，可以選擇啟用部分按鈕

 /*
  例如: {
      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 >

events 事件綁定

name 方法名	params 參數	describe 描述
change	String: value , String: render	編輯區發生變化的回調事件(render: value 經過markdown解析後的結果)
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	Number: pos, File: imgfile	圖片文件添加回調事件(pos: 圖片在列表中的位置, File: File Object)
imgDel	Array(2):[Number: pos,File:imgfile ]	圖片文件刪除回調事件(Array(2): 兩個元素的數組，第一位是圖片在列表中的位置，第二位是File對象)

代碼高亮

如不需要hightlight代碼高亮顯示，你應該設置ishljs為false

開啟代碼高亮props

<! -- 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時加載

Notice : 可選配色方案和支持的語言是從highlight.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替换到文本原位置![...](0) -> ![...](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 >

圖片上傳詳情點擊這裡...

注

默認大小樣式為min-height: 300px , min-width: 300px 可自行覆蓋
基礎z-index: 1500
僅用作展示可以設置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"

快速鍵

key	keycode	功能
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 + BreakSpace	17 + 8	清空編輯
CTRL + B	17 + 66	加粗
CTRL + I	17 + 73	斜體
CTRL + H	17 + 72	# 標題
CTRL + 1	17 + 97 or 49	# 標題
CTRL + 2	17 + 98 or 50	## 標題
CTRL + 3	17 + 99 or 51	### 標題
CTRL + 4	17 + 100 or 52	#### 標題
CTRL + 5	17 + 101 or 53	##### 標題
CTRL + 6	17 + 102 or 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	^上角標^
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	取消縮進

Dependencies (依賴)

markdown-it
auto-textarea

Markdown 語法拓展

emoji
subscript
superscript
container
definition list
abbreviation
footnote
insert
mark
todo list
highlight
katex
images preview
toc

可通過獲取markdown-it對象引入其他語法插件可通過獲取markdown-it對象引入其他語法插件

update(更新內容)

更新日誌

Collaborators(合作者)

CHENXCHEN
ygj6
yukaige

License (證書)

mavonEditor is open source and released under the MIT License.

展開

mavonEditor

mavonEditor

English Documents

example (圖片展示)

PC

Install mavon-editor (安裝)

Use (如何引入)

如何在nuxt.js 中使用

API 文檔

props

toolbars

events 事件綁定

代碼高亮

圖片上傳

注

快速鍵

Dependencies (依賴)

Markdown 語法拓展

update(更新內容)

Collaborators(合作者)

License (證書)

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

億美內容管理系統ExmayCMS

國外視屏聊天源碼

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

Google Dorks

shepherd

mongo express