ckeditor4 vue2.0 上传图片到服务器

最新推荐文章于 2024-09-27 14:27:29 发布
最新推荐文章于 2024-09-27 14:27:29 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： ckeditor vue 前端 文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elizebeth6/article/details/121553160
版权
本文介绍了在vue2.0项目中集成ckeditor4并实现图片上传到公司服务器的过程。在初始尝试使用ck5失败后，转向ck4，配置fileUploadResponse阻止了默认接口请求。通过调试，最终成功实现在图片上传成功后跳转到预览页面的效果。
摘要由CSDN通过智能技术生成

最近碰到的问题，关于ckeditor4 与 vue项目结合问题
项目是2.0的框架构建的
一开始想部署的是ck5
后来发现好像是不行
换成ck4后在上传图片过程中碰到的问题
需要将图片上传到公司服务器
配置过程中碰到的问题，在fileUploadResponse中打断了他默认的接口请求，图片上传成功后，没有像官网demo一样跳转到图像预览的页面

后来经过调试最终实现与官网一样的效果
以下是配置
在config.js中

config.filebrowserUploadUrl = 'http://xxxx.com';

在调用ck的页面中

		this.editor = CKEDITOR.replace('ckeditor'
最低0.47元/天 解锁文章
elizebeth6
关注
专栏目录
CKEditor实现图片上传
itmyhome的专栏
12-13 6万+
本人用的CKEditor版本为4.3 CKEditor配置和部署参考XXX。 CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮 并且预览中有一堆火星文，可以修改相应配置删除它。 第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.confi
VUE2.x 使用CKEditor5 按需引入 + 自定义上传图片
qq_43554420的博客
05-11 1960
本指南假定您使用Vue CLI 3+作为样板
在vue中使用ckeditor富文本，实现上传本地图片
Wehter的博客
11-18 2802
哦，俺使的是ckeditor4-vue，应该差不多吧，记录一下吧，有同样用这个插件的大佬也可以跟着一起研究一下（废话不多说） 下载安装ckeditor4-vue npm i ckeditor4-vue@1.0.1或者"ckeditor4-vue": "^1.0.1",将这个代码放到package.json中，然后npm i 想要实现本地图片，最重要的就是（反正我这最重要）"ajax-hook": "^2.0.3",安装这个玩意 至于ckeditor的使用 在main.js中： import CKEdit
CKEDITOR粘贴图片自动上传到服务器(VUE版)
最新发布
alisky119的博客
09-27 1289
编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,jsp,php,asp.net,.net core功能：复制粘贴word内容图片该说不说最近这个需求挻火的，今天早上又有网友加我QQ，实际上之前QQ号码就已经在网上公开了，但是还是有很多网友找不到，这个说实话就真没办法了，除了公布QQ号码以外我还公开了微信号码，应该是随便一搜就能够搜到的。有一说一，网友的动手能力还是要稍微加强一下。
ckeditor 自定义上传图片
02-05
ckeditor 自定义上传图片 可以自定义上传图片按钮，源码，
CKEditor去掉图片上传预览框里面的英文字母
zhengun的专栏
09-30 1248
本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置。 CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮  并且预览中有一堆火星文，可以修改相应配置删除它。 第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewT...
vue使用CKEditor富文本组件上传图片
喜欢做一些demo，和分享遇到的 BUG
08-01 1126
CKEditor富文本组件上传图片、粘贴截图即可触发图片上传。
SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码.zip
05-23
SpringBoot2.0可以借助如Git或MongoDB的GridFS来实现版本控制，而Vue3.0则可以使用Quill、CKEditor等富文本编辑器，让用户轻松编辑Markdown格式的文档。 在实际项目中，还需要考虑安全性，例如使用Spring Security...
阳光企业网站管理系统V2.0 scscms
08-21
阳光企业网站管理系统V2.0用户手册 ======================================= 版权声明： 阳光企业网站管理系统（Sunshine Corporation Site），简称SCSCMS或SCS，其标识及程序，属太阳光工作室版权所有。 本站...
基于SSM+vue的前后端分离小项目（用户后台管理系统的实现）
qq_41986840的博客
01-24 8186
本篇博客将介绍现今主要流行的前后端分离方式构建管理系统的实现 项目搭建环境： windows系统 服务器：Tomcat 9.0 项目运行环境：JDK1.8 前端主要技术：HTML、CSS、VUE前端框架、axios异步处理 服务器端主要技术： Spring、SpringMvc、mybatis 数据库：Mysql 5.5 构建管理工具：Maven 开发工具：SQLyog、IntelliJ IDE...
通过ckeditor组件在vue2中实现上传图片
Heartnottowake的博客
04-12 814
2，下载sdk，https://ckeditor.com/ckeditor-5/online-builder/#，打开这个地址，配完就可以下载。3，启动sdk，运行npm install ,npm run build,在build文件夹下就有一个ckeditor.js。1，配置图片上传，其实就是imageUpload这个插件，首先在组件ckeditor添加属性config。直接将这个js放到我们的项目public下，通过script引入即可。5，在我们的组件中引入即可，这样上传图片就完成了，整体代码。
CKEditor整合上传图片功能，绝对能用
06-21
这个一款破解后的富文本编辑器，功能齐全，集成图片管理上传功能！
CKEditor_4_Image_Upload:CKEditor 4的简单隐藏iframe图片上传按钮
05-25
CKEditor 4图片上传 CKEditor 4的简单隐藏iframe图片上传按钮 下载档案 将imageupload文件夹上传到ckeditor插件文件夹 [removed][removed] [removed] CKEDITOR.plugins.addExternal('imageupload', '/ckeditor/plugins/imageupload/', 'plugin.js'); var editor = CKEDITOR.inline('editable', { extraPlugins: 'imageupload' }); [removed] plugin.js中的可配置选项 var action = '/admin/create/upload'; var field = 'upload'; 形式行\u52a8=
vue-ckeditor2：Vue.js的CKEditor 4包装器
02-23
维克迪克特 Ckeditor用于Vue.js 2 要求 > = 4 > = 2 安装 CDN < script src =" https://unpkg.com/vue-ckeditor2 " > </ script > NPM $ npm install vue-ckeditor2 --save 用法 本文档适用于v2.0 +。 如果您要查找旧版本，请在文档 成分 然后在您的组件中： < template> < div> < vue-ckeditor v-model = " content " : config = " config " @ blur = " onBlur ($event) " @ focus = " onFocus ($event) " @ contentDom = " on
ckeditor 4 上传图片
weixin_52517502的博客
02-19 853
在web/js/ckeditor/config.js配置文件中增加：（其中imageUpload是下面写的servlet的url）拿到一个项目后台用ckeditor4,根据实际需求要添加上传图片功能。4、eclipese热部署自动刷新设置。2、编写servlet处理图片上传。3、配置上传文件路径。
CKEditor粘贴图片自动上传到服务器(VUE版)
Mr_Zang666的博客
04-13 258
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题。发现不管什么编辑器只要将图片转换成base64后就可以直接使用（IE8及一下可能不支持），由于编辑器中添加word文档功能也只是自己用，因此可以忽略这种浏览器了。这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了。所有图片都能够保存在服务器中，而且支持分布式图片存储。
vue2使用CKEditor 4富文本
qq_60654563的博客
06-26 1435
CKEditor 4富文本官方说已经不维护了，相当于报废的产品，但是基本的功能还是可以用的，用在vue里面基本没有什么问题网上很多的安装CKEditor 4步骤，但是亲身试用没用直接下载包好用。
vue2使用ckeditor4富文本，超详细，超多插件！
qq_35031494的博客
07-05 2491
vue2使用ckeditor4富文本，超详细，超多插件！
Vue3.0集成CKEditor5实现图片上传教程
"本文将介绍如何在Vue 3.0项目中集成并使用CKEditor 5，特别是关于图片上传的功能。我们将遵循一个简单的步骤来设置CKEditor，并展示一个实际的Vue组件示例代码。" CKEditor 5是一款流行的富文本编辑器，提供了丰富...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值