VUE中使用UEditor百度富文本编辑器

最新推荐文章于 2024-05-17 17:21:27 发布
最新推荐文章于 2024-05-17 17:21:27 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： web Ueditor 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiawenyi1234/article/details/105531548
版权
本文介绍了在 Vue 项目中如何集成并使用百度的 UEditor 富文本编辑器。首先，从指定地址下载 UEditor 1.4.3.3 PHP UTF-8 版本，将其资源放置在 /static/ue/ 目录下。接着，修改配置文件以设置编辑器的宽度、高度等参数。然后，创建 Vue 组件 `ue.vue`，用于封装 UEditor。最后，在其他页面引用该组件，并通过配置参数来使用 UEditor，注意需手动调用 `returnContent` 方法来获取编辑器内容。
摘要由CSDN通过智能技术生成

我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢？呵呵，当然这是极好的。但是我们一般用 vue 来制作管理后台，在制作管理后台的时候，不可避免的，我们需要用到富文本编辑器。
在这里插入图片描述
我尝试过 github 上的若干富文本编辑器，虽然能够实现一部分需求，但是还是不能充分满足我的需求。而百度推出的 UEditor 编辑器口碑不错，文档充分，还是很不错的选择（百度能有良心产品，不容易啊！）。但是 UEditor 没有 npm 安装，需要我们自己手工引入进来。这个到底怎么解决呢，我查找了一些资料，把这些给理顺了。今天出这个文章给遇到这个问题的朋友参考。
准备集成 UEditor 编辑器

下载 UEditor 编辑器 源码

首先，下载 UEditor 源码。我这边下载的是 UEditor 1.4.3.3 PHP UTF-8版本 下载地址：http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-php

下载之后，把资源放到 /static/ue/ 目录下。文档结构如下：

最低0.47元/天 解锁文章
Good 奈斯
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.x集成百度UEditor富文本编辑器的方法
10-17
在Vue2.x项目中集成百度UEditor富文本编辑器，主要涉及以下几个步骤和知识点： 1. **下载与放置UEditor源码**： 首先，你需要从官方渠道下载UEditor的源代码，并将其放入项目的`static`文件夹中。这确保了编辑器的...
vue中使用ueditor富文本编辑器
12-29
最近在做后台管理系统的时候遇到要使用富文本编辑器。最后选择了ueditor，我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建，  1、下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个utf8-jsp的文件夹，里面包含的内容如下： 2、将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下，修改ueditor.config.js文件夹中的内容，如下图： 3、编写子组件 <template> <div id=id type=text/plain></div> </template>
vue集成百度UEditor富文本编辑器使用教程
10-17
主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在vue中使用百度富文本编辑器
m0_46873896的博客
05-11 1279
先在官网下载压缩包![在这里插入图片描述](https://img-blog.csdnimg.cn/2020051117395313.png 解压后放到项目的public里面 安装依赖包npm i vue-ueditor-wrap 在main.js中全局引入 import VueUeditorWrap from 'vue-ueditor-wrap' Vue.component('vue-ueditor-wrap', VueUeditorWrap) 最后在你要使用的页面注册引入配置即可 <temp
vue项目添加百度富文本编辑器（ueditor）
sgjy_15522801752的博客
05-17 1106
只能解决两个弹层切换赋值的问题。并不能解决添加弹窗里面添加了内容，再次打开新增清空上次输入值的问题。导致这个问题出现是因为：vue为双向绑定的，一开始添加了watch监听默认的。第二步：把你的下载的富文本添加到项目中，然后在main.js中引用相关。第三步：把ueditor分装成组件便于以后使用。在关闭弹窗的时候把值清空一下。下面使用方式，我就不再写了，懒。下面说一下逻辑页面的实现。介绍一个写的比较详细的。
vue使用百度富文本编辑器
weixin_41760500的博客
06-29 2823
vue 使用百度富文本编辑器，由于element带的编辑器样式过于简单，所以使用百度富文本编辑器。 **第一步：**登陆富文本官网百度富文本编辑器下载最新版本，具体选择哪个语言的版本，你可以问下后端，其实哪个都一样，区别只是为了后面图片上传的配置提供方便。 **第二步：**将下载下来的文件存放在static目录下，并在main.js文件下引入 复制代码如下： import '../static/utf8-jsp/ueditor.config.js' import '../static/utf8-jsp
vue使用百度富文本编辑器（ueditor）
轻风细雨_林木木
12-06 441
vue使用百度富文本编辑器(ueditor) 前言： 最近项目中用到ueditor，但从来没有在vue上使用过，于是就简单尝试，但是始终不成功。搜索了几乎所有博客，但是基本都是从一个地方copy复制的！！！ 关键还...
VUE+百度富文本编辑器
u014012093的博客
10-16 773
在我们开发过程中或多或少会遇到需要富文本的功能，富文本编辑器其实也很多，但是我们常用的就是那么几个，比如百度UEditor富文本编辑器，这个使用起来也方便，功能也很完善。但是总有那么一点吊胃口，百度富文本编辑器官网也不再做更新了，在vue项目中使用的话很难配置，开发过程中遇到的问题！ 前期准备工作下载好UEditor 后续提供下载UEditor下载地址 下载好的UEditor文件放置在位置 vue-cli3版本放在public目录下，vue-cli2版本放在静态static目录下 以vue-cli2为例.
Vue中使用富文本ueditor
qq_35946021的博客
03-02 1731
vue-ueditor-wrap 组件它对ueditor进行了二次封装，集成秀米等第三方插件也方便。注意 vue-ueditor-wrap v3 仅支持 Vue 3。this.imageList数组内容有属性URL为图片地址就行了。以上是我使用elementUI正常上传图片的请求及返回参数。返回的是图片绝对路径，插入的图片就需要直接拿data值。因为后端已经有写好图片上传接口了，但是有时候需要的。都是不符合的，此时就是需要我们前端去自定义了。多选上传图片的话就没问题了。要解决图片上传问题，
百度富文本编辑器资源下载
12-31
百度富文本编辑器资源下载
vue-ueditor-wrap UEditor资源包
03-14
帮助想要使用vue-ueditor-wrap的伙伴们更便捷的获取到这个资源运行项目
使用vue-ueditor-wrap组件时导入的百度ueditor资源包
05-22
使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用百度ueditor自定义图片上传,在线图片插入,在线图片管理 这篇文章哦
vue集成百度富文本编辑器
weixin_30642305的博客
07-11 527
1.前期工作，访问百度富文本官网下载相应的百度富文本文件，根据后端用的技术下载相应的版本，建议下载最新版UTF-8版（有图有真相，看图） https://ueditor.baidu.com/website/download.html 2.将下载好的文件解压，存放在项目位置下： 　　>1.如果是在vue脚手架中集成百度富文本框，则将解压后选取部分文件新建文件夹U...
VUE2.0集成百度富文本编辑器Ueditor
god2030的博客
02-14 1521
VUE2.0集成百度富文本编辑器Ueditor
SpringBoot2.2.6集成Ueditor1.4.3.3富文本编辑器
dusuanyun的博客
06-01 327
SpringBoot2.2.6集成Ueditor1.4.3.3富文本编辑器 下面链接有详细的说明 http://note.youdao.com/noteshare?id=78874a675581c191477a392c241d722b
Vue2+VueRouter2+Webpack+Axios 构建项目实战（十二）集成 UEditor 百度富文本编辑器
晓光同学的博客
02-07 369
Vue2+VueRouter2+Webpack+Axios 构建项目实战（十二）集成 UEditor 百度富文本编辑器 前情回顾 通过前面系统的学习，我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢？呵呵，当然这是极好的。但是我们一般用 vue 来制作管理后台，在制作管理后台的时候，不可避免的，我们需要用到富文本编辑器。 我尝试过 git
vue中引入ueditor富文本编辑器Cannot read properties of undefined (reading 'replace')
最新发布
08-09
在 Vue 中引入 UEditor 富文本编辑器时遇到 `Cannot read properties of undefined (reading 'replace')` 这种错误通常是由于初始化 UEditor 实例时遇到了某些数据未定义或者组件状态有问题。这可能有以下几个原因： 1. 初始化 UEditor 的时候，你可能尝试访问了还未赋值的数据。确保你在调用 `UEditor()` 之前已经正确地设置了需要替换的元素内容。 ```javascript <template> <div ref="editorContainer"></div> </template> <script> import UEditor from 'vue-ueditor'; export default { components: { UEditor, }, data() { return { editorInstance: null, }; }, mounted() { this.editorInstance = new UEditor({ element: this.$refs.editorContainer, // 其他配置项... }); }, </script> ``` 2. 检查 `element` 变量是否指向了正确的 DOM 元素，如果 `this.$refs.editorContainer` 在渲染时不存在，`ref` 就无法获取到。 3. 确认在实例化 UEditor 时，你需要替换的内容（如初始内容）已经被设置并且不是 `undefined` 或 `null`。 4. 如果你是在事件回调中使用 UEditor，检查触发这个操作的条件是否满足，防止在编辑器尚未准备好时就调用了某些方法。 修复这个问题后，你可以运行你的应用并查看错误是否消失。如果还是有疑问，可以提供具体的代码片段以便更好地定位问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值