在百度ueditor上粘贴从word中copy的图片和文字 图片无法显示的问题

拜拜、爱过 提交于 2019-11-27 02:34:55

1.1. 集成到UEditor1.x

说明:

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

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

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

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

 

主要步骤如下:

1.1.1. 上传WordPaster文件夹

 

1.1.2. 在工具栏图标集合中增加插件按钮图标

 

1.1.3. 修改ueditor.css文件

增加以下代码:

.edui-default.edui-for-wordpaster.edui-icon {

    width16px;

    height16px;

    background-position-648px-77px;

}

.edui-default.edui-for-netpaster.edui-icon {

    width16px;

    height16px;

    background-position-693px-77px;

}

.edui-default.edui-for-excelpaster.edui-icon {

    background-position-675px-77px;

}

优化:

/*WordPaster*/

.edui-default .edui-for-wordpaster .edui-icon{width: 16px;height: 16px;background-position: -648px -77px;}

.edui-default .edui-for-netpaster .edui-icon{width: 16px;height: 16px;background-position: -693px -77px;}

.edui-default .edui-for-excelpaster .edui-icon{background-position: -675px -77px;}

压缩:

.edui-default .edui-for-wordpaster .edui-icon{width: 16px;height: 16px;background-position: -648px -77px;}.edui-default .edui-for-netpaster .edui-icon {width: 16px;height: 16px;background-position: -693px -77px;}.edui-default .edui-for-excelpaster .edui-icon{background-position: -675px -77px;}

或者使用单独的图片

.edui-default.edui-for-excelpaster.edui-icon { width16px;height16px;backgroundurl(“[url]http://www.ncmem.com/images/w.png”[/url])no-repeat;}

 

1.1.4. 在ueditor工具栏中增加插件按钮

 

 

1.1.5. 增加插件按钮事件响应代码

代码如下:

UE.commands[‘wordpaster’] = {

    execCommand : function(){

        pasterMgr.Paste();

    }

};

UE.commands[‘netpaster’] = {

    execCommand : function(){

        pasterMgr.UploadNetImg();

    }

};

 

如果使用ueditor.all.min.js则添加下列代码:

代码:

UE.commands.wordpaster={execCommand:function(){pasterMgr.Paste();}};

 

 

1.1.6. 增加工具栏命令按钮

 

如果使用ueditor.all.min.js则添加下列代码:

 

1.1.7. 添加到右键菜单

集成后的效果:

 

1.1.8. 自定义Ctrl+V快捷键

 

1.1.9. 引用页面代码

<html xmlns=”[url]http://www.w3.org/1999/xhtml”>[/url]

<head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

    <script type=”text/javascript” src=”ueditor.config.js” charset=”utf-8″></script>

    <!–<script type=”text/javascript” src=”ueditor.all.js” charset=”utf-8″></script>–>

    <script type=”text/javascript” src=”ueditor.all.min.js” charset=”utf-8″></script>

    <link type=”text/css” rel=”Stylesheet” href=”WordPaster/WordPaster.css”/>

    <link type=”text/css” rel=”Stylesheet” href=”WordPaster/js/skygqbox.css” />

    <script type=”text/javascript” src=”WordPaster/js/json2.min.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/jquery-1.4.min.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/w.edge.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/w.app.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/w.file.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/WordPaster.js” charset=”utf-8″></script>

    <script type=”text/javascript” src=”WordPaster/js/skygqbox.js” charset=”utf-8″></script>

</head>

<body>

     <textarea name=”后台取值的key” id=”myEditor”>这里写你的初始化内容</textarea>

     <script type=”text/javascript”>

        var pasterMgr = new WordPasterManager();

         pasterMgr.Config[PostUrl”] = “http://localhost:1761/upload.aspx”

         pasterMgr.Load();//加载控件

        

         UE.getEditor(‘myEditor’,{onready:function(){//创建一个编辑器实例

              pasterMgr.SetEditor(this);

         }});

     </script>

</body>

</html>

 

说明:

WordPasterManager必须申明成全局变量

 

 

常见问题:

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

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

 

2.整合后无法粘贴图片

可能原因:[url]http://bbs.ncmem.com/thread-517-1-1.html[/url]

插件需要配置一下,可参考我写的这篇文章 :http://blog.ncmem.com/wordpress/2019/08/07/word%E5%A6%82%E4%BD%95%E9%80%89%E6%8B%A9%E5%9B%BE%E7%89%87%E7%B2%98%E8%B4%B4/

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!