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/ dis t/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/ dis t/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="markdow nop tion" v-model="handbook"/>
</no-ssr>
</div>
</template>
<script>
export default {
data() {
return {
markdow nop tion: {
bold: true,// 粗体
... // 更多配置
},
handbook: "#### how to use mavonEditor in nuxt.js"
};
}
};
</script>
<style s cop ed>
.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) Box ShadowBooleantrue开启边框阴影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/2051网站地址 : https://www.zhystar.com
GitHub: https://github.com/hinesboy/mavonEditor
网站描述: 基于vue的markdown编辑器
mavonEditor官方网站
官方网站： https://www.zhystar.com
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。