富文本框编辑器实现：a、支持图片复制粘贴；b、支持word复制粘贴图文。

djgaman 2017-04-01 01:38:21

1、富文本框编辑器实现：a、支持图片复制粘贴；b、支持word复制粘贴图文。

2、能实现“只知道文件路径如"c://dir/xx.png"，能用js上传文件到服务器去的“ 也可以说一下怎样实现。

3、不限浏览器，但不要安装插件，如何实现，最好给个demo。

...全文

4154 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

hza1oc2h3a 2017-04-01

打赏
举报

引用 4 楼 d1g9z93w 的回复:

Word图片上传控件(WordPaster2)：http://www.cnblogs.com/xproer/archive/2011/04/08/2009500.html Xproer.WordPaster整合代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WordPaster For FCKEditor-2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>
	<link type="text/css" rel="stylesheet" href="WordPaster/css/ui-lightness/jquery-ui-1.8.11.custom.css" />
    <script type="text/javascript" src="WordPaster/js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="WordPaster/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>
	<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
	<!—textarea控件,FCK编辑器需要借助于这个控件创建-->
	<textarea id="txtContent" name="txtContent" cols="1" rows="1"></textarea>
	
	<script language="javascript" type="text/javascript">
		var pasterMgr = new PasterManager();
		pasterMgr.Config["PostUrl"] = "http://localhost:10727/asp.net/upload.aspx";
		pasterMgr.Load();//加载控件

		var fck = new FCKeditor('txtContent');
		fck.BasePath = "fckeditor/";
		//oFCKeditor.ToolbarSet = "Basic";
		fck.Height = 300;
		fck.Value = '';
		fck.ReplaceTextarea();//将上面的textarea替换成FCK编辑器，这样服务端可以通过Request.Form["txtContent"]取到数据

		//初始化编辑器
		function FCKeditor_OnComplete(editorInstance)
		{
			pasterMgr.SetEditor(editorInstance);
		}
	</script>
</body>
</html>
Chrome,Firefox,IE(x86),IE(x64)整合示例下载： ASP.NET-FCKEditor2.x示例 ASP.NET-CKEditor3.x示例 ASP.NET-CKEditor4.x示例 ASP.NET-KindEditor3.x示例 ASP.NET-KindEditor4.x示例 ASP.NET-TinyMCE3.x示例 ASP.NET-TinyMCE4.x示例 ASP.NET-UEditor1.x示例 ASP.NET-xheditor1.x示例 ASP.NET-CuteEditor6.x示例 ASP.NET-eWebEditor9.x示例 JSP-FCKEditor2.x示例 JSP-CKEditor3.x示例 JSP-CKEditor4.x示例 JSP-KindEditor3.x示例 JSP-KindEditor4.x示例 JSP-TinyMCE3.x示例 JSP-TinyMCE4.x示例 JSP-UEditor1.x示例 JSP-Xheditor1.x示例 PHP-FCKEditor2.x示例 PHP-CKEditor3.x示例 PHP-CKEditor4.x示例 PHP-KindEditor3.x示例 PHP-KindEditor4.x示例 PHP-TinyMCE3.x示例 PHP-TinyMCE4.x示例 PHP-UEditor1.x示例 PHP-xhEditor1.x示例

目前在网上基本上也只能找到这个基于插件的解决方案了。其它的无论Flash还是HTML5还是Chrome 50+都不行。还有其它的编辑器也不行，包括百度的UEditor，百度的UEditor粘贴后需要你再手动选择文件路径上传。如果word中只有一张图片还好说。但是我们的客户Word中的图片都是几十张，这种数量如果让用户一张张用手选择的话。。。。。。。

d1g9z93w 2017-04-01

打赏
举报

引用楼主 djgaman 的回复:

1、富文本框编辑器实现：a、支持图片复制粘贴；b、支持word复制粘贴图文。 2、能实现“只知道文件路径如"c://dir/xx.png"，能用js上传文件到服务器去的“ 也可以说一下怎样实现。 3、不限浏览器，但不要安装插件，如何实现，最好给个demo。

楼主试试这个控件：http://www.cnblogs.com/xproer/archive/2011/04/08/2009500.html 1.FCKEditor2.x。从剪帖板，本地硬盘，第三方软件或Word文档中复制图片，然后点击编辑器工具栏中的”粘贴图片”按钮。图片将自动上传到Web服务器中.

2.FCKEditor2.x编辑器。上传成功

3.CKEditor3.x编辑器。

4.CKEditor3.x-粘贴Excel

5.KindEditor3.x-粘贴图片

6.KindEditor4.x-粘贴Excel

7.UEditor1.x编辑器

Xproer.WordPaster整合代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WordPaster For FCKEditor-2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>
	<link type="text/css" rel="stylesheet" href="WordPaster/css/ui-lightness/jquery-ui-1.8.11.custom.css" />
    <script type="text/javascript" src="WordPaster/js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="WordPaster/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>
	<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
	<!—textarea控件,FCK编辑器需要借助于这个控件创建-->
	<textarea id="txtContent" name="txtContent" cols="1" rows="1"></textarea>
	<!--创建FCKEditor控件-->
	<script language="javascript" type="text/javascript">
		var pasterMgr = new PasterManager();
		pasterMgr.Config["PostUrl"] = "http://localhost:10727/asp.net/upload.aspx";
		pasterMgr.Load();//加载控件

		var fck = new FCKeditor('txtContent');
		fck.BasePath = "fckeditor/";
		//oFCKeditor.ToolbarSet = "Basic";
		fck.Height = 300;
		fck.Value = '';
		fck.ReplaceTextarea();//将上面的textarea替换成FCK编辑器，这样服务端可以通过Request.Form["txtContent"]取到数据

		//初始化编辑器
		function FCKeditor_OnComplete(editorInstance)
		{
			pasterMgr.SetEditor(editorInstance);
		}
	</script>
</body>
</html>