Vue项目集成Markdown标记语言编辑器（MavonEditor）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue项目集成Markdown标记语言编辑器（MavonEditor）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Markdown编辑器的使用

这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法，又可以用来解析
效果图,mavonEditor实现了Markdown集成
Markdown是一种标记语言，相较于word文档更加清晰方便，适合进行笔记等。将Markdown集成进入自己项目之后，就可以在项目中使用的Markdown编辑器了

1、安装mavonEditor包

mavon-editor: 2.10.4版本

npm install mavon-editor --s

or

npm install mavon-editor --save

2、引入并使用mavonEditor,以下二选一

全局注册(大部分页面都需要markdown解析的推荐使用）main.js中引入

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

局部注册（只有一到两个页面会用到markdown推荐使用这个）页面中引入

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default({
	components:{// 在页面中注册组件
		mavonEditor 
	}
})

3.VUE中使用markdown编辑

 
 <el-button type="primary" @click="handleAdd" >新增 <i class="el-icon-circle-plus-outline"></i></el-button>

<el-table :data="tableData" >
<template slot-scope="scope">
          <el-button type="success" @click="handleEdit(scope.row)" >编辑 <i class="el- 
            icon-edit"></i>
</el-button>
        </template>
</el-table>

<el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="文章标题">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
           //mavonEditr
          <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


data() {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false,
 
      viewDialogVis: false
    }
  },
methods: {
 handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
// 绑定@imgAdd event
    imgAdd(pos, $file) {
     let $vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append('file', $file);
      axios({
        url: `http://${serverHost}/file/upload`,
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，
         * `$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，
         * `$vm`为 `this.$refs.md`
         */
        $vm.$img2Url(pos, res.data);
      })
    },
}

新增/编辑效果图如下:

Vue项目集成Markdown标记语言编辑器（MavonEditor）

4. 预览/详情文章图片功能代码:

 


<el-table-column prop="content" label="文章内容">
        <template slot-scope="scope">
          <el-button @click="view(scope.row.content)" type="primary">查看内容</el-button>
        </template>
      </el-table-column>

<!--  点击查看内容显示弹窗开始   -->
    <el-dialog title="文章信息" :visible.sync="viewDialogVis" width="60%" >
      <el-card>
          //预览/详情框
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
          :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
          />
        </div>
      </el-card>
    </el-dialog>
    <!--  点击查看内容显示弹窗结束   -->


data() {
    return {

      content: '',
      viewDialogVis: false

    }
  },




methods: {
    view(content) {
      this.content = content
      this.viewDialogVis = true
    },

文章图片预览效果图:

Vue项目集成Markdown标记语言编辑器（MavonEditor）

详情代码参考:

文章来源地址https://www.toymoban.com/news/detail-466364.html

<div class="pd-10" style="font-size: 22px; color: #3F5EFB; cursor: pointer"
             @click="$router.push('/front/articleDetail?id=' + item.id)">{{ item.name }}</div>

<template>
  <div style="color: #666">
    <div style="margin: 20px 0; ">
      <div class="pd-10" style="font-size: 40px; color: #3F5EFB;
       cursor: pointer">{{ article.name }}</div>
      <div style="font-size: 20px; margin-top: 10px;float: right;">
        <i class="el-icon-user-solid"></i> <span>{{ article.username }}</span>
        <i class="el-icon-time" style="margin-left: 20px"></i>
        <span> {{ article.createTime }}</span>
      </div>
    </div>
    <div style="margin-top: 60px">
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
      />
    </div>
       </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  data(){
    return{
      article: {},
       id: this.$route.query.id
    }
  },
  created() {
         this.loadArticleDetail()
  },
  methods:{
       loadArticleDetail(){
         this.request.get("/article/detail/"+this.id).then(res=>{
             console.log(res.data)
              this.article=res.data;
         })
       }
  }
}
</script>

<style scoped>

</style>