vue如何使用ueditor富文本插件

最新推荐文章于 2025-10-24 12:43:46 发布

原创

最新推荐文章于 2025-10-24 12:43:46 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #elementui

本文详细介绍了如何在Vue项目中使用UEditor富文本编辑器，包括安装vue-ueditor-wrap，从百度网盘下载编辑器包，创建ueditor.vue组件，配置并注册组件，以及在页面中插入并初始化编辑器的步骤。

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。话不多说看流程：↓ ↓ ↓

一、显示效果如下

二、首先下载 ueditor-----》 npm install vue-ueditor-wrap -S

三、百度网盘请输入提取码提取码：ee73 ，下载包

四、新建ueditor.vue文件，内容如下

<template>
  <div class="mod-demo-ueditor">

    <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;"></script>
    
    <!-- 获取内容 -->
    <!-- <p><el-button @click="getContent()">获得内容</el-button></p>
    <el-dialog
      title="内容"