wangEditor在vue框架下的使用

已于 2022-02-23 14:48:27 修改
阅读量2.1k 收藏 6
点赞数 3
分类专栏： wangEditor 文章标签： vue.js javascript 前端 typescript
于 2022-02-23 13:53:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61686921/article/details/123088407
版权

wangEditor是一个轻量级的微博富文本编辑器，在我最近的一个小项目中，与偶遇到部份内容在后台的编辑，需要使用富文本，但是第一次使用富文本编辑器的组件就踩了很多坑

首先这个项目的后台的基本框架是使用ruoyi自动生成的，ruoyi有自己封装好的富文本编辑器组件，这个组件功能也比较完善，只是他插入图片的功能是将图片转化为base64直接插入到文本内，这就导致文本会变得非常的大以至于无法直接插入到我们的数据库里，然后就使用了另外的组件，最终选定的就是wangEditor。

他有较完善的官方文档供我们阅读，上手比较简单，而且也会教你如何在vue框架中使用他的

最低0.47元/天 解锁文章
青空W
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中使用wangEditor富文本编辑器（踩坑）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-31 2万+
wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 vue富文本 编辑器 总结
在vue中使用wangeditor
monthover的博客
05-31 3279
在vue中使用wangeditor wangeditor是一个轻量级富文本编辑器可见网址 一、v4版本使用 创建一个config.js文件： export default { menus: [ "head", "bold", "fontSize", // "fontName", "italic", "underline", '|', "strikeThrough",
【RuoYi】框架中使用wangdietor富文本编辑器
最新发布
qq_51933234的博客
06-07 675
学无止尽，大家加油哦！希望我们都能在顶峰想见！
vue中使用wangeditor富文本编辑器
云霸屏CSDN官方博客
11-19 5847
需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
vue中使用wangEditor富文本编辑器
gulanga5的博客
02-22 1353
5. 创建LoginView.vue , 在router/index.js中进行配置 , 因为此组件是显示在主routerview里面的所以配置路由时配置在第一层级。4. 创建RegView.vue , 在router/index.js中进行配置 , 因为此组件是显示在主routerview里面的所以配置路由时配置在第一层级。- router/index.js: 路由配置文件, 在里面配置客户端请求xxx地址时由xxx.vue显示。- public文件夹: 图片资源文件保存在此文件夹下。
vue 使用wangEditor
热门推荐
a314753967的博客
05-19 1万+
1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue 2、封装组件 MyEditor.vue, （这里是通过props content 将展示内容传入） <template> <div> <div style="border: 1px solid #ccc; margin-top: 10px"> <!-- 工具栏 -->
vue使用wangeditor
xiaoyu_biu的博客
09-30 2416
vue使用wangeditor 1.在终端安装wangeditor npm i wangeditor --save 2.创建一个index.vue页面 在div上绑定一个ID 我这里ID绑定的websiteEditorElem <template> <div> <div id="websiteEditorElem" style="height:300px;background: #ffffff;"></div> </div&gt
在vue中获取wangeditor的html和text的操作
01-21
补充知识：vue-cli webpack 引入 wangeditor(轻量级富文本框) 1：使用npm下载： //（注意 wangeditor 全部是小写字母） npm install wangeditor 2: 直接在项目模板中引用 import E from ‘wangeditor’ 3：HTML ...
vue3+wangEditor5自定义上传音频+视频
07-05
wangEditor5是一款轻量级且功能强大的富文本编辑器，它提供了丰富的API和自定义选项，使得在Vue3这样的现代前端框架中集成变得容易。下面，我们将详细阐述实现这一功能的关键步骤和知识点。 首先，我们需要安装Vue3...
node-modules/@wangeditor/editor-for-vue
07-13
`@wangeditor/editor-for-vue`正是基于这种设计理念，将@wangeditor编辑器封装为Vue组件，使得在Vue应用中使用@wangeditor变得非常简单。只需引入组件并按照Vue的组件方式使用，就能在Vue应用中实现富文本编辑功能。...
vue中使用wangerditor Editor.zip
07-28
在Vue.js框架中，WangEditor是一个非常受欢迎的富文本编辑器组件，它提供了丰富的文本格式化选项，如字体、颜色、对齐方式等，同时支持图片上传、表格插入等功能，使得用户可以在前端进行类似Word的文本编辑操作。...
使用Vue实现图片上传的三种方式
10-18
在某些情况下，可能需要更自定义的上传行为，例如使用Progress事件追踪上传进度，或者在上传前进行图片压缩。这种情况下，可以使用axios直接处理整个上传过程。 - **主要步骤** 1. 创建`FormData`对象，添加文件...
工作108:vue里面wangEdit编辑器使用
歌谣的博客
11-12 784
WangEdit使用 <template lang="html"> <div class="editor"> <!--定义的为表头的属性--> <div ref="toolbar" class="toolbar"> </div> <!--定义的为表格的属性--> <div ref="editor" class="text"> </div> </d.
Vue: wangEditor 编辑器使用示例
彭世瑜的博客
02-23 3409
文档 https://doc.wangeditor.com/ 组件封装 组件目录 . ├── Editor.vue ├── index.scss # 自定义样式文件 └── upload-image.js # 自定义图片上传 主文件 Editor.vue <template> <div ref="editor"></div> </template> <script> import E from 'wangeditor'; im
Vue中使用wangEditor富文本框
lfyyyyy的博客
03-22 1165
在这个示例中，我们首先引入Vue 3的ref函数用于创建响应式数据。然后引入了WangEditor，并在setup函数中初始化了富文本编辑器。在初始化过程中，我们可以配置一些选项，比如图片上传的服务器地址。接着定义了保存内容的方法saveContent，在这个方法中，我们可以获取编辑器的HTML内容并进行保存或其他操作。最后，在组件的mounted钩子函数中调用initEditor方法来初始化编辑器。
若依前后端分离 使用富文本编辑器 wangEditor
xiuxiuxiu555的博客
08-11 2350
在vue项目里面使用富文本编译器
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
jinxi1112的博客
02-20 6896
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，实在是整不出来，换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传oss等功能，支持 IE10+ 浏览器。 官网：www.wangEditor.com 1. 编辑器组件wang-edit <template> <div class="text-edit"> ...
基于Vue2.X对WangEditor 5富文本编辑器进行封装与使用，支持单个或多个图片点击、粘贴、拖拽上传，Vue3.X项目也可直接使用
都随它大小便吧
09-02 6922
一直想要一个神奇多功能的富文本编辑器，经同事介绍这个 WangEditor 富文本编辑器，发现挺好用的。于是自行封装一下，这样在复用组件时，可以少写一些代码，直接组件引用即可。
Vue中使用wangeditor
http://xueshuai.top
03-04 896
这款富文本还行，使用起来比较简单 首先安装npm包 npm install wangeditor -S 然后在需要的组件中使用 <div class="editor" id="editor" ref="editor"></div> 设置 editor 的css .editor{ width: 100%; height: 700px; margi...
使用wangEditor在vue中实现全屏的功能
06-08
要在 Vue 中使用 wangEditor 实现全屏功能，可以按照以下步骤进行： 1. 安装 wangEditor： ``` npm install wang-editor --save ``` 2. 在需要使用的组件中引入 wangEditor： ``` import wangEditor from 'wangeditor' ``` 3. 在组件的 mounted 钩子函数中初始化 wangEditor： ``` mounted() { const editor = new wangEditor(this.$refs.editor) editor.create() // 添加全屏按钮 editor.config.menus = editor.config.menus.map(item => { if (item === 'fullscreen') { return Object.assign(item, { className: 'w-e-icon-enlarge2', title: '全屏' }) } return item }) } ``` 4. 在 CSS 文件中添加全屏样式： ``` .w-e-toolbar .w-e-menu .w-e-menu-fullscreen:before { content: "\e68c"; } .w-e-editor-container.w-e-fullscreen { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background-color: #f1f1f1; } ``` 5. 在 wangEditor 的配置对象中添加全屏功能： ``` editor.config.menus = [ // ... 其他菜单项 'fullscreen' ] editor.config.onchangeFullscreen = (isFullscreen) => { if (isFullscreen) { this.$refs.editorWrapper.classList.add('w-e-fullscreen') } else { this.$refs.editorWrapper.classList.remove('w-e-fullscreen') } } ``` 这样就可以在 Vue 中使用 wangEditor 实现全屏功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青空W

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值