mavonEditor
mavonEditor 介绍
mavonEditor:基于 vue 的 Markdown 编辑器,支持所见即所得编辑模式、阅读模式等
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',srr: 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>
API 文档
props
name 名称type 类型default 默认值describe 描述valueString初始值languageStringzh-CN语言选择,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语fontSizeString15px编辑区域文字大小scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)boxShadowBooleantrue开启边框阴影subfieldBooleantruetrue: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)defaultOpenStringedit: 默认展示编辑区域 , preview: 默认展示预览区域,其他 = editplaceholderString开始编辑...输入框为空时默认提示文本editableBooleantrue是否允许编辑codeStyleStringcode-githubmarkdown样式: 默认github, 可选配色方案toolbarsFlagBooleantrue工具栏是否显示navigationBooleanfalse默认展示目录shortCutBooleantrue是否启用快捷键autofocusBooleantrue自动聚焦到文本框ishljsBooleantrue代码高亮imageFilterfunctionnull图片过滤函数,参数为一个File Object,要求返回一个Boolean,true表示文件合法,false表示文件不合法imageClickfunctionnull图片点击事件,默认为预览,可覆盖tabSizeNumberttab转化为几个空格,默认为ttoolbarsObject如下例工具栏链接: http://www.fly63.com/nav/2051GitHub:https://github.com/hinesboy/mavonEditor
网站描述:基于vue的markdown编辑器