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编辑器
mavonEditor
小编说
以上是编程之家为你收集整理的mavonEditor全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。