vue2.0中使用summernote富文本编辑器, 并实现上传图片至七牛

于 2023-05-29 23:34:18 发布
阅读量1k 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qikexun/article/details/130938907
本文介绍了如何在Vue2.0项目中使用summernote富文本编辑器，并详细阐述了配置过程，包括引入依赖、设置jQuery别名、组件初始化以及自定义图片上传功能，特别是如何将上传的图片插入到编辑器并存储到七牛云。

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

vue2.0中使用summernote富文本编辑器, 并实现上传图片至七牛

ackage.json 文件中添加所需的依赖库,然后执行 npm install 安装这些库

2. 在 src / main.js 文件中导入下列库文件

3. 由于summernote 使用 jQuery 库, 我们在组件里需要导入 jQuery才能使用, 为了方便起见,我们在 build / webpack.base.conf.js文件中的 resolve配置项 中添加一个 alias 指向jquery路径

4. 在vue组件中引入元素

5. 在vue组件的 mounted 生命周期钩子中初始化summernote

6. 自定义上传图片的方法, 收到图片地址 url 后插入到富文本编辑器

自定义的网络 API 文件如下:

qikexun
关注
Vue2+summernote 编辑器
weixin_43829905的博客
07-05 864
Vue2+summernote 编辑器
vue+summernote富文本编辑器
weixin_43881166的博客
07-28 3575
vue+summernote富文本编辑器 最近项目中有新增编辑报告的需求需使用富文本编辑器，在网上找了几篇相关博客，于是选择了summernote ，summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。 参考文章 https://blog.csdn.net/davidhzq/article/details/100842866 summernote官网 https://summernote.org/ 实现效果 1.安装所需的依赖 npm instal
vue-summernote
05-15
Vue-Summernote 基于summernote的VueJS.2的RTF编辑器 需要 用法 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/bootstrap@4.1.1/dist/css/bootstrap.min.css "/> < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/summernote@0.8.10/dist/summernote-bs4.css " > ... < script src =" https://cdn.jsdelivr.net/npm/babel-polyfill@latest/dist/polyfill.min.js " > </ script > < scri
vue2.x版本中使用summernote编辑器
lookingForw_4585的博客
02-26 1757
vue2.x版本中使用summernote编辑器summernote的基本属性如何配置（工具栏）获取数据（HTML内容） summernote的基本属性   summernote是一款基于jQuery的编辑器，vue社区中关于类似的编辑器也有很多，但是原有的就项目中使用了summernote，为了保持统一，故使用summernote！ 显示效果如下，顶部的工具条为自定义配置的，后面讲到。 使用summernote需要先安装依赖： npm install summernote npm install jqu
vue+summernote富文本编辑器使用
热门推荐
Pluto
05-08 1万+
最近项目中需要使用富文本编辑器，之前用的是vue-quill-editor，但是测试的时候发现这个编辑器会把内联的样式都清除掉，去查了一圈文档和各路网友的问答，有说这个就是quill的特性，不支持内联样式，具体原因我也没看明白，总之是改不动了，所以换了summernote。 summernote官网：https://summernote.org/ 在网上找到了几篇相关的博客，结合个人使...
vue2.0 实现富文本编辑器功能
12-09
前端富文本编译器使用总结： UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲 bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery… ...
vue 是否有word编辑控件_vue2.0 实现富文本编辑器功能
weixin_39656513的博客
12-19 1474
前端富文本编译器使用总结：UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了wangEditor：轻量、简洁、易用，但是升级到 3.x 之后，不便于定制...
html手机端富文本,移动端富文本踩坑
weixin_39608657的博客
06-20 2475
最近在做一个vue的项目。之前的前端同事离职了，和女朋友去云南潇洒去了，剩下我一个苦逼坐在电脑前哒哒哒敲代码。刚刚接手就开始做移动端富文本编辑器的需求。主管说压了半个月，尽快做出来。在网上找了不少编辑器，前段时间做过react的后台项目，用了百度的编辑器。功能很多很强，遗憾的是ios不支持flash，在移动端并不适用。因为要兼容ios和Android，而且还要在vue的项目中使用，在网上找了很多编...
Element框架下的图片与文件上传及富文本组件封装指南
在探讨Element UI组件库中关于上传图片、文件以及富...通过以上步骤，我们就可以在使用Element UI框架时，实现图片和文件上传功能，并通过封装的方式集成一个功能完备的富文本编辑器，为用户提供丰富的内容编辑能力。
vue项目引入富文本编辑器summernote
Road
02-07 1470
一、相关依赖、文件的引入 ①:通过vuecli脚手架安装jquery、bootstrap、popper.js、summernote开发依赖 ②:对照summernote官网在main.js中引入如下文件: 二、对应组件使用 ①:在对应组件所需要使用summernote的位置写上id为summernote的div元素 ②由于需要使用jquery语法,因此在组件的script中导入jquery: ③在组件呈现前调用初始化summernote的方法,网上随便找了几个博客的配置 ④按照自己的需要耐心的修改对
summernote富文本框
04-08
富文本框
富文本-summernote的一个简单demo
08-17
亲测好使的一个富文本编辑器的demo
超漂亮的Bootstrap 富文本编辑器summernote
11-24
Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。对于主要的脚本语言或框架（PHP，Ruby，Django，NodeJS），该项目有提供了集成示例。 Bootstrap summernote，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂
【七牛云】通过富文本summernote，上传图片到七牛云
LuviaWu的博客
11-06 899
在这边我只对summernote富文本加以说明 1、首先是在index.html引入对应js和css &amp;amp;amp;amp;amp;amp;amp;amp;lt;link rel=&amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;amp;amp;quot; href=&amp;amp;amp;amp;amp;amp;amp;quot;dist/static/summernote/s
详细搞懂vue2.0 3.0区别-summernote富文本使用
SoulNone的博客
01-13 2249
详细搞懂vue2.0 3.0区别-summernote富文本使用
VUE配置Summernote富文本编辑器
z_jing0927的博客
12-17 2472
效果图 安装所需依赖 cnpm i summernote cnpm i jquery cnpm i bootstrap cnpm i popper.js 在main.js引入 // 导入summernote编辑器 import 'summernote' // 导入summernote编辑器css样式 import 'summernote/dist/summernote.css' // 导入summernote编辑器中文语言包 import 'summernote/lang/summernote-zh-
summernote富文本编辑器插件的用法 -- 上传图片
哼唧怪
04-19 5425
来先来好好介绍一下什么是summernote： Summernote富文本编辑器 一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计和功能。 附上summernote富文本框官网地址：https://summernote.org/ 好了废话...
vue2+ summernote 文件上传
lixixi
04-04 1109
在mounted 里面加载插件 在页面里写入summernote &lt;div name="summernote" ref="summernote"&gt;&lt;/div&gt; 在js里面加载： $(this.$refs.summernote).summernote({ minHeight: 250, lang: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值