vue3 中添加wangEditor富文本编辑器

最新推荐文章于 2024-09-02 18:44:03 发布

在线炒粉的kt

最新推荐文章于 2024-09-02 18:44:03 发布

阅读量409

点赞数 1

文章标签：前端框架

本文链接：https://blog.csdn.net/EALLV/article/details/124137973

版权

该博客介绍了如何在Vue项目中安装并使用wangEditor富文本编辑器。通过npm安装插件后，在组件中引入编辑器，并在onMounted钩子中实例化编辑器，配置了本地上传图片为Base64格式，隐藏网络图片链接。同时，展示了编辑器的初始化代码和样式的设置。

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

首先下载插件

npm install wangeditor --save

在组件中引入

<template>

<div id="richText"></div>

</template>



<script setup>

import E from 'wangeditor'

import { ref, onMounted } from 'vue' //onMounted 在渲染之后进行实例化


// 富文本编辑器

const Editor = ref('')

onMounted(() => {

Editor.value = new E('#richText')

// 若想本地上传图片,将Base64设置为true

Editor.value.config.uploadImgShowBase64 = true

// 隐藏网络图片,如果不隐藏，那么两种形式的上传图片都显示

Editor.value.config.showLinkImg = false

// 创建

Editor.value.create()

// 这是富文本中的内容

Editor.value.txt.html()

})

</script>

<style scoped>

#richText {
    width: 100%;
    height: 400px;
    background-color: #fff;
}
</style>