vue3页面插入富文本编辑器

最新推荐文章于 2025-04-23 23:06:01 发布

萝莉洛伊

最新推荐文章于 2025-04-23 23:06:01 发布

阅读量448

点赞数 8

分类专栏： vue3-富文本编辑器文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_58771326/article/details/138157050

版权

本文介绍了如何在Vue项目中集成WangEditor富文本编辑器，包括基本代码示例、配置文件、自定义图片和视频上传功能，以及组件销毁时的正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为自己最近写的程序用到类似的编辑器输入，所以查了一圈，大多都看起来很麻烦，也看不到对于我这种笨蛋，所以最后发现一个简单好用的：

一、template部分代码

<!--        富文本编辑器开始-->
        <div style="border: 1px solid #ccc; width: 100%;height: 100%;">
          <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
          <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" />
 <el-button style="margin: 0 auto" @click="getEditorHTML">发布</el-button>
        </div>
<!--        富文本编辑器结束-->

二、script部分的代码