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

最新推荐文章于 2024-04-12 16:55:58 发布
最新推荐文章于 2024-04-12 16:55:58 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： ckeditor vue 前端 文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/elizebeth6/article/details/121553160
版权

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

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

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

在调用ck的页面中

		this.editor = CKEDITOR.replace('ckeditor'
最低0.47元/天 解锁文章
elizebeth6
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CKEditor整合上传图片功能，绝对能用
06-21
这个一款破解后的富文本编辑器，功能齐全，集成图片管理上传功能！
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 +。 如果您要...
在vue中使用ckeditor富文本，实现上传本地图片
Wehter的博客
11-18 2747
哦，俺使的是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组件在vue2中实现上传图片
最新发布
Heartnottowake的博客
04-12 407
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 实现CTRL+V粘贴图片并上传、WORD粘贴带图片
weixin_52041354的博客
03-26 443
可能原因：可能上传页面有登陆验证，上传时没有添加SESSION信息，导致上传失败。1.如果接口字段名称不是file，请配置FileFieldName。4.如果接口有权限验证（登陆验证，SESSION验证），请配置COOKIE。说明：此教程以CKEditor4.x为例，使用其他编辑器的查看对应教程。3.如果接口返回的图片地址没有域名，请配置ImageUrl。2.如果接口返回JSON，请配置ImageMatch。1.为什么整合到项目中图片无法上传？初始化控件，并配置上传接口。将下列文件夹复制到项目中。
CKEdite4富文本编辑器安装和使用
han_0111的博客
09-17 2001
CKEdite4富文本编辑器安装和使用 CKEditor4富文本编辑器安装和使用 使用CKEditor4富文本编辑器和其他的第三方组件库不一样，不可以使用npm install 进行下载。 而是必须进入官网进行下载压缩包。（CKEditor官方网址—可以点击直接过去） 进去后会发现分为：基本套餐、标准套餐、全包、定制四种使用方式，每个都对应着不同的样式和功能。 1、这时就可以选择你需要的进行下载，解压时切记一定要选择 解压到当前文件夹。 2、解压后需要将文件夹复制到项目根目录下 public/static
ckeditor4 上传图片压缩 图片压缩后上传 上传文件前处理 上传图片之前压缩图片
风云的博客
07-24 826
网上搜不到合适的例子，所以写了一个，感觉应该有一些参考价值，核心就是ckeditor中的一个属性：fileUploadRequest 下面看例子 const questionBodyEditor = CKEDITOR.replace( 'questionBodyEditor'); questionBodyEditor.on( 'fileUploadRequest', function( evt ) { var fileLoader = evt.data.fileLoader,
CKEditor 4.7实现图片上传服务器
Cahier
10-16 3186
1.首先去官网下载CKEditor,要想上传图片需要下载基础包装之上的版本 2.下载好了之后打开ckeditor\plugins\image\dialogs\image.js文件 在打开的文件搜索hidden，找到Upload 将它后面的 ！0修改为0 3.打开CKEditor根目录下的ckeditor.js 在里面添加下面这句话 config.filebrow
ckeditor粘贴word图片且图片文件自动上传功能
weixin_52041354的博客
06-07 71
1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码） 因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。 例如www.wangEditor.com 但试了一圈都不支持IE8 。 所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。 如果没有必要，不建议使用.
ckeditor5-vue:官方CKEditor 5 Vue.js组件
05-02
适用于Vue.js的CKEditor 5 RTF编辑器组件3+ :warning: 该存储库包含Vue.js 3+的CKEditor 5组件。 较低Vue.js版本的组件位于另一个存储库- 。 Vue.js的官方 RTF编辑器组件。 :open_book: 请参阅中的指南以了解...
CKEditor4+ckfinder ASP.NET 支持图片上传
01-21
CKEditor4+ckfinder ASP.NET 支持图片上传
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=
限制ckeditor上传图片文件大小的方法
10-26
本文的方法解决了如何限制ckeditor上传图片文件大小，具体步骤可如下，大家可以参考使用
ckeditor4音频视频上传自定义插件
04-14
ckeditor4音频视频上传自定义插件
vue使用ckeditor4富文本编辑器配置
maowencai的博客
09-28 905
解决富文本粘贴复制图文功能，解决粘贴复制多张图片，解决富文本粘贴复制图片非正常显示，vue使用ckeditor4富文本编辑器配置
vue项目集成CKEditor4富文本编辑器
EverythingAtOnce的博客
12-12 1405
CKEditor4（CKEditor官方网址—可以点击直接过去），官网有ckeditor4和ckeditor5两个大的产品可以使用，我用的是CKEditor4，CKEditor 是新一代的FCKeditor，是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。
CKEditor 4的初始化配置与开启上传功能（JAVA EE）
lyy396的专栏
01-13 6228
在JAVA工程项目中配置CKEditor4,同时开启其上传功能，包括图片的上传，超链接的中文件上传（主要用于正文中的附件下载），flash上传。同时不用与CKfinder集成，简单快捷，复用性强。 配置步骤：
Ckeditor4上传图片（后台springboot，前后端分离）
大海无量的博客
06-29 5291
；参考：https://www.jianshu.com/p/30912efe59ca 版本：ckeditor_4.12.1_full 1.下载ckeditor，然后解压，复制到项目中： 2.引入 ckeditor.js文件 <script type="text/javascript" src="../../ckeditor/ckeditor.js" ><...
vue中使用ckeditor
wallowyou的博客
12-22 9588
vue中使用ckeditor 很多项目中都需要使用富文本编辑器，市面上关于富文本编辑器的js库也有很多。个人使用过wangEditor，TinyMce以及ckeditor。各有各的优缺点，就不一一论述。此文单独讲述ckeditor的使用方式，包括ckeditor4以及ckeditor5搭配vue的使用方法以及如何自定义一些功能。 ckeditor5 ckeditor5提供了所见即所得的各种编辑解决方案。从类似于googledocs和Medium的编辑器，到Slack或类似Twitter的应用程序，所有这些
vue2.0 富文本
07-27
Vue 2.0不原生支持富文本编辑器，但你可以使用一些第三方插件来实现富文本编辑功能。以下是一些常用的富文本编辑器插件： 1. Quill：一个强大的富文本编辑器，可以与Vue很好地集成。你可以通过安装和导入Quill的Vue组件来使用它。 2. CKEditor：另一个流行的富文本编辑器，也有Vue的插件可用。你可以使用npm安装CKEditor，并在Vue组件中引入它。 3. Vue2Editor：一个基于Quill的富文本编辑器组件，专门为Vue设计。你可以通过npm安装并在Vue项目中使用它。 4. tiptap：一个基于ProseMirror的富文本编辑器框架，可以在Vue中使用。它提供了丰富的功能和可定制性。 这些插件都有详细的文档和示例，你可以根据自己的需求选择适合的插件，并按照它们的文档进行安装和配置。希望对你有所帮助！如果你还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值