使用 vue 封装 wangEditor 的详细方法

2023-11-14 22:17:58

这才是 vue 中封装 wangEditor 的正确姿势

前言

随着前端技术的发展，富文本编辑器在项目中的使用越来越广泛，而 wangEditor 作为一款优秀的富文本编辑器，以其功能强大、使用方便等优点深受广大开发者的喜爱。然而，如何将 wangEditor 封装到 vue 项目中，却让不少开发者感到头疼。本文将详细介绍如何在 vue 中封装 wangEditor，并提供示例代码和详细解释，帮助您轻松实现 wangEditor 在 vue 项目中的使用。

封装过程

1. 安装 wangEditor

首先，需要在项目中安装 wangEditor，可以通过以下命令安装：

npm install wangEditor --save

2. 创建 wangEditor 组件

接下来，需要创建一个 wangEditor 组件，将 wangEditor 封装到该组件中。可以在项目的 src 目录下创建一个名为 WangEditor.vue 的文件，并添加以下代码：

<template>
  <div id="editor-container"></div>
</template>

<script>
import { ref } from 'vue'
import Editor from 'wangeditor'

export default {
  setup() {
    const editorRef = ref(null)

    const initEditor = () => {
      const editor = new Editor(editorRef.value)
      editor.create()
    }

    return {
      editorRef,
      initEditor,
    }
  },
}
</script>

3. 在 vue 项目中使用 wangEditor 组件

现在，可以在 vue 项目中使用 wangEditor 组件了。可以在需要使用富文本编辑器的页面中添加以下代码：

<template>
  <WangEditor v-model="content" />
</template>

<script>
import { reactive } from 'vue'
import WangEditor from './WangEditor.vue'

export default {
  components: {
    WangEditor,
  },
  setup() {
    const content = reactive({
      html: '',
    })

    return {
      content,
    }
  },
}
</script>