说明:UEditor1.4x示例中编辑器版本已经升级到ueditor-1.4.3.3,请下载最新的示例。已经提供asp,asp.net,jsp,php,vue等语言的示例。

1.1. 集成到UEditor1.x

说明:

1.wordpaster以插件形式集成到ueditor中,不会对ueditor原有功能造成影响。当不需要wordpaster功能时可以直接卸载。

2.wordpaster使用的上传页面是一个单独的页面,和ueditor官方demo中的上传页面不是同一个页面。

3.wordpaster与ueditor版本无关,可支持多个版本。

4.wordpaster是基于插件技术实现的功能,使用前需要安装插件。

1.下载示例:

http://www.ncmem.com/webapp/wordpaster/versions.aspx

ueditor多图上传没有按钮(Word图文一键粘贴导入)(1)

项目:1.复制目录:WordPasterueditor1.4x示例中,wordpaster插件JS采用更加合理的方式实现了插件,不需要再修改ueditor的任何代码,请下载ueditor1.4x示例使用。

ueditor多图上传没有按钮(Word图文一键粘贴导入)(2)

2.引入组件并初始化

ueditor多图上传没有按钮(Word图文一键粘贴导入)(3)

注意:不要重复引入jquery,如果您的项目已经引入了jq,则不用再引入jq-1.4

ueditor多图上传没有按钮(Word图文一键粘贴导入)(4)

3.配置上传接口地址(PostUrl)

ueditor多图上传没有按钮(Word图文一键粘贴导入)(5)

示例中上传接口默认返回的数据是图片的完整路径。如:http://www.ncmem.com/test.jpg

如果您的上传接口返回JSON数据请修改ImageMatch配置,参考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

如果您的上传接口有SESSION验证,则请配置COOKIE,参考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3如果使用的是ueditor自带的上传接口,请修改文件字段名称,参考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

注意:

1.如果接口字段名称不是file,请配置FileFieldName。ueditor接口中使用的upfile字段

ueditor多图上传没有按钮(Word图文一键粘贴导入)(6)

参考:http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON,请配置ImageMatch

ueditor多图上传没有按钮(Word图文一键粘贴导入)(7)

参考:http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的图片地址没有域名,请配置ImageUrl

ueditor多图上传没有按钮(Word图文一键粘贴导入)(8)

参考:http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf45539364.如果接口有权限验证(登陆验证,SESSION验证),请配置COOKIE。或取消权限验证。参考:http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

整合后的效果:整合后,在工具栏中会多出两个图标按钮。

ueditor多图上传没有按钮(Word图文一键粘贴导入)(9)

图标定义位置:

ueditor多图上传没有按钮(Word图文一键粘贴导入)(10)

1.1.7. 添加到右键菜单

ueditor多图上传没有按钮(Word图文一键粘贴导入)(11)

ueditor多图上传没有按钮(Word图文一键粘贴导入)(12)

集成后的效果:

ueditor多图上传没有按钮(Word图文一键粘贴导入)(13)

1.1.8. 自定义Ctrl V快捷键

ueditor多图上传没有按钮(Word图文一键粘贴导入)(14)

UEditor后端配置说明:

http://fex.baidu.com/ueditor/#server-config

说明:

WordPasterManager必须申明成全局变量

ueditor多图上传没有按钮(Word图文一键粘贴导入)(15)

批量粘贴效果:

ueditor多图上传没有按钮(Word图文一键粘贴导入)(16)

自动替换编辑器中的图片地址:在上传多张图片时非常方便,也非常高效。

ueditor多图上传没有按钮(Word图文一键粘贴导入)(17)

图片保存路径:

ueditor多图上传没有按钮(Word图文一键粘贴导入)(18)

常见问题:

1.为什么整合到项目中图片无法上传?

可能原因:可能上传页面有登陆验证,上传时没有添加SESSION信息,导致上传失败。可在上传页面增加SESSION参数。

2.整合后无法粘贴图片

可能原因:http://www.ncmem.com/doc/view.aspx?id=305840a72ab142378b3960b6a224bd75

,