使用的庫(kù)為 mavonEditor
效果如下:
image.png
- 安裝
npm install mavon-editor --save - 引用
在 vue 項(xiàng)目的 main.js 文件中引用
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);
3.組件中使用
<template>
<div class="mavonEditor">
<mavon-editor :toolbars="markdownOption" v-model="contents" />
</div>
</template>
<script>
data() {
return {
contents: ` # mavon-editor
>這是一個(gè)基于Vue的markdown編輯器 `,
markdownOption: {
bold: true, // 粗體
italic: true, // 斜體
header: true, // 標(biāo)題
underline: true, // 下劃線
strikethrough: true, // 中劃線
mark: true, // 標(biāo)記
superscript: true, // 上角標(biāo)
subscript: true, // 下角標(biāo)
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 無(wú)序列表
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, // 保存（觸發(fā)events中的save事件）
/* 1.4.2 */
navigation: true, // 導(dǎo)航目錄
/* 2.1.8 */
alignleft: true, // 左對(duì)齊
aligncenter: true, // 居中
alignright: true, // 右對(duì)齊
/* 2.2.1 */
subfield: true, // 單雙欄模式
preview: true // 預(yù)覽
}
};
},
</script>
- 只用預(yù)覽
<mavon-editor
v-model="contents"
:subfield="false"
:boxShadow="false"
defaultOpen="preview"
:toolbarsFlag="false"
/>
如果要去除預(yù)覽的背景顏色和邊框需要引用一個(gè)全局 css 覆蓋原本的 css,并添加以下代碼
.v-note-panel {
border: none !important;
}
.v-show-content {
background-color: white !important;
}
