美文网首页
VUE开发--mavonEditor--markdown编辑器

VUE开发--mavonEditor--markdown编辑器

作者: 无剑_君 | 来源:发表于2019-12-21 11:28 被阅读0次

一、mavonEditor简介

mavonEditor:基于 Vue 的 Markdown 编辑器,支持所见即所得编辑模式、阅读模式等。
GIT地址:https://github.com/hinesboy/mavonEditor

二、组件安装

 npm install mavon-editor --save

三、全局注册

Use (如何引入)

1. index.js:

  // 全局注册
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";
// 导入组件
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
// use
Vue.use(mavonEditor);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: function(h) {
    return h(App);
  }
}).$mount("#app");

2.App.vue

<template>
  <div id="app">
    <mavon-editor v-model="value" />
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
效果浏览

四、属性

名称 类型 默认值 描述
value String 初始值
language String zh-CN 语言选择,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语
fontSize String 15px 编辑区域文字大小
scrollStyle Boolean true 开启滚动条样式(暂时仅支持chrome)
boxShadow Boolean true 开启边框阴影
subfield Boolean true true: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)
defaultOpen String 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
toolbars Object 工具栏

相关文章

网友评论

      本文标题:VUE开发--mavonEditor--markdown编辑器

      本文链接:https://www.haomeiwen.com/subject/iaewictx.html