Vue实现富文本输入框

效果：

 cnpm install @wangeditor/editor-for-vue --save

示例代码：

<!--
 * @Description: Vue使用富文本编辑器
 * @Author: mhf
 * @Date: 2023-04-07 01:29:48
 * @intro: 参考文档 https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8
-->
<template>
  <div class="rich-text">
    <backHomeBtn v-if="show === 0">
      <template>
        <div style="border: 1px solid #ccc; margin-top: 20px">
          <!-- 富文本编辑器 -->
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>

        <el-button style="margin-top: 20px" type="primary" @click="showExample">
          示例
        </el-button>
      </template>
    </backHomeBtn>

    <richTextExample v-if="show === 1" ref="richTextExample" />
  </div>
</template>

<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import richTextExample from "@/views/richText/richTextExample";

export default Vue.extend({
  components: { Editor, Toolbar, richTextExample },
  data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'

      show: 0, // 用于控制展示哪个页面的标志
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    /**
     * @Event 方法
     * @description: 查看示例
     * */
    showExample() {
      this.show = 1;
    },

    /**
     * @Event 方法
     * @description: 回到本页（子页面使用）
     * */
    close() {
      this.show = 0;
    },
  },
  mounted() {
    /**
     * @Event 方法
     * @description:  模拟 ajax 请求，异步渲染编辑器
     * */
    setTimeout(() => {
      this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
});
</script>
<!-- 引入editor样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.rich-text {
}
</style>