vue使用vue-ueditor-wrap集成秀米

最新推荐文章于 2024-05-16 15:39:50 发布
最新推荐文章于 2024-05-16 15:39:50 发布
阅读量862 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45508373/article/details/126884889
版权

vue通过UEditor集成秀米

接入Ueditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码：

  1. 下载代码放置到vue项目的静态资源目录(assets/public取决于你的vue-cli版本)
  2. 下载代码中的后台代码可进行删除

vue-ueditor-wrap

使用vue-ueditor-wrap，vue-ueditor-wrap是一个“包装”了 UEditor 的 Vue 组件,使用它可以快速集成

  • vue-ueditor-wrap文档地址
  • 安装npm i vue-ueditor-wrap或者yarn add vue-ueditor-wrap
  • 注册组件
    // 在main.js中全局注册
import VueUeditorWrap from 'vue-ueditor-wrap'; 
Vue.component('vue-ueditor-wrap', VueUeditorWrap);
  • 组件内使用
    <template>
	<VueUeditorWrap v-model="ueContent" :config="myConfig" />
</templat
最低0.47元/天 解锁文章
丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue+vue-ueditor-wrap+秀米
lixiaoyu_的博客
07-30 2272
我们的项目中使用的是ueditor+秀米的富文本编辑器，github上的大神做了一个基于vue的ueditor的组件，能够实现双向数据绑定，可以不用费劲的getContent、setContent。就决定用这个组件 —— vue-ueditor-wrap 。so~ vue+vue-ueditor-wrap+秀米. 开始吧
vue UEditor集成秀米
loading-world
08-29 1724
vue 集成UEditor +秀米，网上的资料比较少，记录下这个过程。 首先，感谢github上某大神的组件 vue-ueditor-wrap，大家感觉有用，给大神点个star吧。 第一步：下载大神的代码，解压，找到如下目录： 第二步：解压utf8-jsp.zip,然后把解压后的文件，在自己项目static目录下建一个目录名为UEditor,并把刚刚解压后的文件复制到该目录下。结果如图： 第...
Vue集成UEditor（vue-ueditor-wrap）_ueditor vue-uwditor-wrap(1)
最新发布
2401_84620100的博客
05-16 512
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢。react和Vue的原理，区别，亮点，作用。
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
热门推荐
snowball的博客
12-29 1万+
6.2.2.3、body上属性contentEditable显示为true，，设置为false即可禁止编辑。6.2.2.4、在ready方法调用（递归）方法，同时处理ueditor编辑器id后最不为0的情况。7.1、解决section标签没有style、class的问题，否则加了样式也不能生效。4.1、在开发的业务文件引入vue-ueditor-wrap、配置文件。vue项目：ueditor（vue-ueditor-wrap）3.3、vue项目 安装插件vue-ueditor-wrap。
vue-quill-editor和vue-ueditor-wrap富文本编辑器应用
qq_44930306的博客
03-22 1613
vue2项目中的两个编辑器应用
vue-ueditor-wrap的安装、封装、使用
帆的博客
11-15 3315
ueditor
vue-ueditor-wrap 是什么？怎么使用？
轻风细雨_林木木
01-18 1393
是什么一个“包装”了 UEditor 的 Vue 组件，支持通过 v-model 来绑定富文本编辑器的内容，让 UEditor 的使用简单到像 Input 框一样。UEditor 并不支持通过 npm 的方式来安装，也只是一个 Vue 组件，组件本身并不是 UEditor 的 Vue 版。
Vue集成UEditor puls富文本编辑器
ew45218的博客
08-16 8976
Vue 集成 ueditor-puls 富文本编辑器。用的系统框架是ruoyi-vue若依前后端分离版本。
vue-ueditor-wrap UEditor资源包
03-14
Vue-UEditor-Wrap是基于Vue.js开发的一个用于集成百度UEditor的组件，它使得在Vue项目中使用UEditor变得更加方便。UEditor是一款强大的富文本编辑器，它提供了丰富的文本格式化、图片上传、表格、代码高亮等功能，...
vue-ueditor-wrap的ueditor
01-12
"vue-ueditor-wrap" 是一个专门为Vue.js设计的ueditor组件，它允许你在Vue应用中无缝地使用UEditor。 UEditor 是百度开发的一款功能强大的富文本编辑器，它提供了丰富的文本格式化、图片上传、表格处理、代码高亮等...
使用vue-ueditor-wrap组件时导入的百度ueditor资源包
05-22
使用vue-ueditor-wrap组件时导入的百度ueditor资源包,如果要恢复百度ueditor图片组件的功能,就去UEditor/dialogs/image/image.html 里面取消屏蔽23,24,25行代码,如果需要查看组件使用放法,请去我主页查看:uve 使用...
vue-ueditor-wrap-demo:基于vue-cli的演示，用于vue-ueditor-wrap
05-01
Vue-Ueditor-Wrap-Demo 基于vue-cli的演示，用于 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build ...
vue-ueditor-wrap：:person_biking:Vue+:high-speed_train:UEditor+ v-模型双向绑定:rocket:https：haochuan9421.github.iovue-ueditor-wrap-demo
02-06
Vue-Ueditor-Wrap Vue + UEditor + v-model双向绑定。UEditor仍然是内部使用频率较高的富文本编辑器，而Vue又具有广泛的使用，将结合，是很多Vue开发者的切实需求。自己在写公司项目时封装了这个组件，它省去了初始...
vue项目中使用ueditor的实例讲解
08-27
vue项目中使用ueditor的实例讲解 在本篇文章中，我们将通过实例讲解来了解如何在Vue项目中使用ueditor。ueditor是一个功能强大且灵活的富文本编辑器，广泛应用于各种web应用程序中。在本篇文章中，我们将一步一步地...
vue集成百度UEditor富文本编辑器使用教程
10-17
主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue项目引入秀米插件
sinat_41273766的博客
06-09 1176
注：整个UEditor文件放入static文件夹下。查看秀米第三方对接平台，根据步骤配置。UEditor整个文件代码附上，
vue-ueditor-wrap富文本编辑器。
CCKing7的博客
04-20 1036
2.下载最新编译的UEditor,并放到public目录下。1.上传文件地址serverUrl需配置，不然会报错。3.引入并注册VueUeditorWrap组件。
vue项目中使用vue-ueditor-wrap
weixin_38822843的博客
03-28 1万+
vue项目中使用vue-ueditor-wrap
vue3 怎么封装vue-ueditor-wrap
11-16
为了封装vue-ueditor-wrap，可以按照以下步骤进行操作： 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值