使用wangEditor + Vue实现一个简单的文本编辑器

 参考文章：

wangeditor官方文档（v4）https://www.wangeditor.com/v4/

实际效果

左侧可进行编辑,点击下面的“保存”按钮后，结果会被渲染到右侧的标签中。

 具体代码

<template>
  <!-- 参考文章： https://blog.youkuaiyun.com/xqnode/article/details/124510204 -->
  <div>
    <div class="up">
      <!-- 编辑区 -->
      <div class="left">
        <div id="richText">
        </div>
      </div>
      <!-- 效果展示区域 -->
      <div class="right">
        <div v-html="content"></div>
      </div>
    </div>

    <div class="down">
      <button @click="clearEditor">点击清空</button>
      <button @click="saveEdit">点击保存</button>
    </div>

  </div>
</template>

<script>
import E from "wangeditor"
let editor;
export default {
  data() {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      content: '',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.initEditor();
  },
  methods: {

    // 初始化编辑器
    initEditor() {
      this.$nextTick(() => {
        editor = new E('#richText');
        // 设置编辑区域高度为 500px
        editor.config.height = 500;
        // 创建编辑器之后，使用 editor.txt.html(...) 设置编辑器内容。

        editor.create();
      })
    },
    // 清空编辑器的内容
    clearEditor() {
      this.$nextTick(() => {
        editor.txt.html('');
      })
      this.content = '';
    },
    // 保存编辑器的内容
    saveEdit() {
      const content = editor.txt.html();
      console.log('内容：', content);
      this.content = content;

    },
  }
}
</script>


<style lang="less" scope>
.up{
  width: 100%;
  display: flex;
  .left{
    flex: 1;
  }
  .right{
    flex: 1;
    border: 2px solid #000;
  }
}
.down{
  width: 100%;
  display: flex;
  justify-content: center;
  button{
    margin: 10px;
  }
}

</style>