Vue引入 mavon-editor 编辑器的详细步骤

Dear 丶 2021-09-07 06:20 1190阅读 0赞

##### Vue引入 mavon-editor 编辑器的详细步骤 #####

###### 一、编辑器的引入 ######

如果你的项目之前没有安装过该编辑器，那就得先安装编辑器

在自己的项目的根目录执行下列命令：

npm install mavon-editor --save

之后等待安装成功，如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]

###### 二、在vue项目的src/main.js注册 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]

点开main.js，全局注册,并且导入mavon-editor样式

import 'mavon-editor/dist/css/index.css'
    import mavonEditor from 'mavon-editor'
    ...
    ...
    Vue.use(mavonEditor)

###### 三、组件使用编辑功能 ######

建立组件：ArticleEditor.vue

组件里面启用mavon-editor编辑器

ArticleEditor.vue初始代码如下：

<template>
      <mavon-editor
        v-model="article.articleContentMd"
        style="height: 100%;"
        ref=md
        @save="saveArticles"
        fontSize="16px">
      </mavon-editor>
    </template>
    
    <script>
      export default {
        name: 'Editor',
        data () {
          return {
            article: {}
          }
        }
    </script>

###### 四、添加标题输入栏 ######

<el-input
            v-model="article.articleTitle"
            style="margin: 10px 0px;font-size: 18px;"
            placeholder="请输入标题"></el-input>

###### 五、与后端交互 ######

methods: {
          saveArticles (value, render) {
            // value 是 md，render 是 html
            this.$confirm('是否保存并发布文章?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.$axios
                  .post('/admin/content/article', {
                    id: this.article.id,
                    articleTitle: this.article.articleTitle,
                    articleContentMd: value,
                    articleContentHtml: render,
                  }).then(resp => {
                  if (resp && resp.status === 200) {
                    this.$message({
                      type: 'info',
                      message: '已保存成功'
                    })
                  }
                })
              }
            ).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消发布'
              })
            })
          },
    }

以上就是Vue项目引入mavon-editor编辑器的详细步骤

页面如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 2]

以上内容是我隔了一段时间之后整理的，如果有什么问题的话，可以留言呀

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70]: /images/20210813/2c9c70edd4234751a740dc344d8155e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 1]: /images/20210813/4598ef2650f04ce1bc19daf2508b24a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMjY0NTk3_size_16_color_FFFFFF_t_70 2]: /images/20210813/aa1eaf86abe246b596aa8b83a66705ed.png