关于ckeditor粘贴图片自动上传

tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud

这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。

http://blog.ncmem.com/wordpress/2019/08/07/umeditor%E7%B2%98%E8%B4%B4word%E5%9B%BE%E7%89%87/

以vue为例说明:

将tinymce下载后放到static目录下,不用npm安装。

powerpaste放到\static\tinymce\plugins目录下

在index.html中引入tinymce.min.js。

代码参数配置如图:

将plugins参数里的paste替换成powerpaste,完工。

最后效果,能够自动批量上传word中的所有图片

图片上传完后,编辑器里面的图片地址也全部都改成了服务器的图片地址了,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本插件使用JAVA技术开发,需要配合Javascript使用,可以将网页中含有的本地图片(src为'file:///')自动到服务器并修改img标签的src属性为新的图片地址。典型应用场景如:配合ckEditor使用,使从WORD粘贴过来的内容中包含的本地图片自动到服务器。 --------------------------------------------------- 依赖环境:JDK1.7 、jQuery、ckEditor4.2、浏览器不限 --------------------------------------------------- 一般使用说明 Javascript API:   类: WordImageUploader(s_url, app_name) s_url:图片的服务器页面地址,为动态页面,如servlet、PHP等; app_name:当前应用的名称   在使用本插件前必须首先创建本类的对象,一个页面中最好只存在一个本对象,本类的创建方法如: var uploader = new WordImageUploader(sUrl,appName);   该类的方法有: uploadWordImagesFromCKEditor(editorInstance, pre_id) 本方法用于将CKEditor中的从WORD粘贴过来的文本中的所有本地图片自动到服务器,参数意义如下: editorInstance:CKEditor的实例; pre_id:图片到服务器后的名称的前辍,方便日后清理等维护工作,如不需要,设为'';   uploadLocalFile(localUrl, name) 本方法用于将单独本地图片到服务器,参数意义如下: localUrl:图片的本地URL,一般形式为:file:///xxx name:图片的名称   使用步骤:   1、引入jQuery类库; 2、引入js文件夹下的wordimage_uploader.js; 3、创建WordImageUploader对象; 4、ckEditor内容改变时调用uploadWordImagesFromCKEditor方法。 插件安装完成后应在网页状态档位置显示“监控台:欢迎使用“本地图片自动插件”。 --------------------------------------------------- 本插件支持所有动态网站技术,DEMO所用技术为jsp,服务器端接受上文件的动态页面为一Servelt:WordImageUploader.java,此文件已经在DEMO中给出,其它动态网站技术请参照此文件自行实现。 --------------------------------------------------- 其它使用详情请参见DEMO源码。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值