JS实现markdown

Serendipity_syn

已于 2022-02-13 20:09:05 修改

阅读量1.2k

点赞数 1

文章标签： javascript elementui vue.js

于 2021-12-20 16:43:39 首次发布

本文链接：https://blog.csdn.net/Serendipity_syn/article/details/122043492

版权

本文介绍了如何利用JavaScript，结合ElementUI和Vue.js，来创建并管理Markdown编辑器。特别强调了在关闭时需要调用destroy方法，以防止重新打开对话框时创建多个编辑器实例。

摘要由CSDN通过智能技术生成

<el-dialog :visible.sync="addVisible" class="addDialog" @opened="createEditor" @close="resetForm('addForm')">
        <el-form-item prop="noteContent">
          <div ref="editor" v-html="addForm.noteEditor"></div>
          <el-input type="textarea" v-model="addForm.noteContent" readonly v-show="false" ></el-input>
        </el-form-item>
</el-dialog>

import wangEditor from 'wangeditor'

data () {
    return {
      editor: null,
      addForm: {
        noteEditor: '',
        noteContent: ''
      }
    }
}

输入内容为noteContent

    //创建富文本编辑器
    createEditor(){
      //创建编辑器
      const editor = new wangEditor(this.$refs.editor)
      // 设置编辑区域高度为 500px
      editor.config.height =