Vue中使用WangEditor富文本编辑框实现文本编辑与展示

在Web开发过程中,富文本编辑器是一个非常重要的功能。本文将介绍如何在Vue项目中集成WangEditor富文本编辑框,实现文本编辑并在页面上展示。

一、WangEditor简介

WangEditor是一款基于JavaScript开发的富文本编辑器,具有轻量级、易用性等优点。它支持多种格式文本编辑,如标题、段落、列表、图片、视频等,非常适合用于博客、论坛、在线文档等场景。

二、准备工作

在开始集成WangEditor之前,请确保您的项目中已安装Vue。以下是本文所需的环境和依赖:

  1. Node.js
  2. Vue CLI
  3. WangEditor(版本:^4.7.0)

三、集成WangEditor

1、安装WangEditor

在项目根目录下,运行以下命令安装WangEditor:

bash 复制代码
npm install wangeditor --save

2、选项式API中使用WangEditor

在选项式API中,我们通常会在组件的mounted钩子中初始化WangEditor,并在methods中定义相关的方法。

javascript 复制代码
<template>
  <div>
    <div ref="editor" style="text-align:left;"></div>
    <button @click="getContent">获取内容</button>
    <div v-html="editorContent" style="border:1px solid #ccc; margin-top:10px; padding:10px;"></div>
  </div>
</template>

<script>
import E from 'wangeditor'

export default {
  name: 'WangEditor',
  data() {
    return {
      editor: null,
      editorContent: ''
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      this.editor = new E(this.$refs.editor)
      this.editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      this.editor.create()
    },
    getContent() {
      console.log(this.editorContent)
    }
  }
}
</script>

3、组合式API中使用WangEditor

在组合式API中,我们使用setup函数来组织代码。setup函数是Vue 3中的新特性,它运行在组件的生命周期之前,是组件的入口。

javascript 复制代码
<template>
  <div>
    <div ref="editorRef" style="text-align:left;"></div>
    <button @click="getContent">获取内容</button>
    <div v-html="editorContent" style="border:1px solid #ccc; margin-top:10px; padding:10px;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import E from 'wangeditor'

export default {
  name: 'WangEditor',
  setup() {
    const editorRef = ref(null)
    const editorContent = ref('')

    const initEditor = () => {
      const editor = new E(editorRef.value)
      editor.customConfig.onchange = (html) => {
        editorContent.value = html
      }
      editor.create()
    }

    const getContent = () => {
      console.log(editorContent.value)
    }

    onMounted(() => {
      initEditor()
    })

    return {
      editorRef,
      editorContent,
      getContent
    }
  }
}
</script>

在组合式API中,我们使用ref来定义响应式数据,并使用onMounted生命周期钩子来初始化编辑器。setup函数返回的对象中的属性和方法都可以在模板中直接使用。

本文介绍了在Vue项目中集成WangEditor富文本编辑框的方法,通过简单的步骤实现了文本编辑与展示。希望对您在开发过程中有所帮助。如有疑问,请随时提问。

相关推荐
知识分享小能手31 分钟前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng2 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科2 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20162 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20094 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔4 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼4 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder4 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔4 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔5 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js