vue中使用markdown编辑器

最新推荐文章于 2024-08-17 11:04:05 发布

hh3167253066

最新推荐文章于 2024-08-17 11:04:05 发布

阅读量1k

点赞数

分类专栏： # Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/hh3167253066/article/details/120089333

版权

Vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1. 安装

安装mavon-editor:npm install mavon-editor --save

2. 引入、配置

在要使用markdown编辑器的组件内操作：

<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
</script>

components: {  mavonEditor },

3. 使用

<mavonEditor
  :subfield="false"
  :autofocus="false"
  v-model="formData.content"
  ref="md"
  style="width: 99%;"
 />

另一种方式

1. 配置

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
 
Vue.config.productionTip = false;
//编辑器
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

2. 使用

3,展示模式

itemDes为输入时的html

<mavon-editor
            :value="itemDes"
            defaultOpen="preview"
            :boxShadow="false"
            style="z-index:1;height:50vh"
            :editable="false"
            :subfield="false"
            :toolbarsFlag="false"
          >
</mavon-editor>