精华内容
下载资源
问答
  • tinymce是很强大的富文本编辑器,可以去官网下载,这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用,此插件目前官网收费每月12美刀,我们就不花这钱了。以vue为例说明:将tinymce下载...
  • 公司做的项目需要用到粘贴Word功能。...我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 网上找了很久,大部分都有一些不成熟的问题,皇天不负有心人终于让我找到了一个成熟的项目。 1、前台页面引用代码...

    公司做的项目需要用到粘贴Word功能。就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中。Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我总不能一张一张复制吧 ?

    我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 

    网上找了很久,大部分都有一些不成熟的问题,皇天不负有心人终于让我找到了一个成熟的项目。

    1、前台页面引用代码

    <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="CKEditor353.index" %>
    
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
        <title>WordPaster For CKEditor-3.x</title>
    
        <linktype="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>
    
        <linktype="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>
    
        <scripttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/w.edge.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/w.app.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/w.file.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>
    
        <scripttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>
    
         <scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>
    
    </head>
    
    <body>
    
         <textareaid="editor1"name="editor1"><imgsrc="http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png"width="134"height="44"/></textarea>
    
        <scripttype="text/javascript">
    
            var pasterMgr = new WordPasterManager();
    
            pasterMgr.Config["PostUrl"] = "http://localhost:2797/asp.net/upload.aspx";//这里填网站的上传路径
    
            pasterMgr.Config["Cookie"] = 'ASP.NET_SessionId=<%=Session.SessionID%>';
    
            pasterMgr.Load(); //加载控件
    
    
    
            CKEDITOR.on('instanceReady', function (evt)
    
            {
    
                pasterMgr.SetEditor(evt.editor);
    
            });
    
            //自定义快捷键
    
            CKEDITOR.config.keystrokes = [
    
                  [CKEDITOR.CTRL + 86/*V*/, 'imagepaster']
    
            ];
    
            //加载CKEditor编辑器
    
            CKEDITOR.replace('editor1');
    
         </script>
    
    </body>
    
    </html>

     

    请求

    文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。

    响应:文件已成功上传

    当文件成功上传时的JSON响应:

    uploaded- 设置为1。

    fileName - 上传文件的名称。

    url - 上传文件的URL。

    响应:文件无法上传

    uploaded- 设置为0。

    error.message - 要显示给用户的错误消息。

    2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

    目前项目是用了一种变通的方式:

    先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

    (富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下

    success : function(data) {
    
         $('#content').attr('value',data.imagePath);
    
         var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值
    
         if (editor) {
    
           editor.destroy(true);//销毁编辑器
    
          }     
    
         CKEDITOR.replace('content'); //替换编辑器,editorID为ckeditor的"id"属性的值
    
         $("#content").val(result);    //对editor赋值
    
         //CKEDITOR.instances.contentCkeditor.setData($("#content").text());
    
     }

    3.接收上传的图片并保存在服务端

    using System;
    
    using System.Collections.Generic;
    
    using System.Web;
    
    using System.Web.UI;
    
    using System.Web.UI.WebControls;
    
    using System.IO;
    
    using System.Text;
    
    
    
    namespace WordImages.asp.net
    
    {
    
         publicpartialclassupload : System.Web.UI.Page
    
         {
    
             protectedvoid Page_Load(object sender, EventArgs e)
    
             {
    
                  string fname = Request.Form["UserName"];
    
                  int len = Request.ContentLength;
    
    
    
                System.Diagnostics.Debug.Write(Session["ck"]);
    
    
    
                  if (Request.Files.Count > 0)
    
                  {
    
                       DateTime timeNow = DateTime.Now;
    
                       string uploadPath = "/upload/" + timeNow.ToString("yyyyMM") + "/" + timeNow.ToString("dd") + "/";
    
    
    
                       string folder = Server.MapPath(uploadPath);
    
                       //自动创建目录
    
                       if (!Directory.Exists(folder))
    
                       {
    
                           Directory.CreateDirectory(folder);
    
                       }
    
                       HttpPostedFile file = Request.Files.Get(0);
    
                       string ext = Path.GetExtension(file.FileName).ToLower();
    
                       //只支持图片上传
    
                       if (ext == ".jpg"
    
                        || ext == ".jpeg"
    
                           || ext == ".png"
    
                           || ext == ".gif"
    
                           || ext == ".bmp"
    
                        || ext == ".webp")
    
                       {
    
                           string filePath = Path.Combine(folder, file.FileName);
    
    
    
                        //
    
                        if(!Directory.Exists(filePath)) file.SaveAs(filePath);
    
                           Response.Write(uploadPath + file.FileName);
    
                       }
    
                  }
    
             }
    
         }
    
    }
    
    

    HTTP协议

    请求头数据:

     

    请求表单数据:

     

    前端效果:

    接下来就看一下具体操作吧

    1、打开工程:

    对于文档的上传我们需要知道这个项目的逻辑是否符合我们的构造。

    运行:

    尝试使用文档复制后粘贴进来:

    图片上传进度

    通过粘贴后,文档以及图片被粘贴进来了,看看html代码是否如我们的预期:

    看来这个工程完全符合我们的预期,图片全部使用img标签统一。传输进度条的效果超出了我的意料。

    来看看我们的文档图片被放置在哪了:

    地址:D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16

    图片被统一放置在文件夹。

    由此看来这个项目的实际效果大大超出了我的意料了,带入工程后完美的优化了工程项目

    工程目录截图:

     

    控件包:

    IE(x86):http://t.cn/AiC6segS

    IE(x64):http://t.cn/AiCXv7ti

    Chrome:http://t.cn/AiC6s86u

    Firefox:http://t.cn/AiCXvMr5

    exe:http://t.cn/AiCXvoVl

     

    示例下载:

    FCKEditor2x:http://t.cn/AiCaglBC

    CKEditor3x:http://t.cn/AiCagROE

    CKEditor4x:http://t.cn/AiCagum4

    CuteEditor6x:http://t.cn/AiCasJmE

    KindEditor3x:http://t.cn/AiCasa2h

    KindEditor4x:http://t.cn/AiCasoFp

    TinyMCE3x:http://t.cn/AiCasN26

    TinyMCE4x:http://t.cn/AiCasOiM

    UEditor1x:http://t.cn/AiCasl3t

    xhEditor1x:http://t.cn/AiCasTa1

    eWebEditor:http://t.cn/AiCas8aK

     

    展开全文
  • 很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。 下面是借用百度doc 来快速实现这个word 粘贴...

    很多时候我们用一些管理系统的时候,发布新闻、公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来。减少排版复杂的工作量。

    下面是借用百度doc 来快速实现这个word 粘贴到 富文本编辑器里面

    方法一:

    工具/原料

    百度doc
    任意富文本编辑器,以UEDdito为例

    方法/步骤

    登录,http://word.baidu.com

    点击右上角 导入文档,如图所示

    导入后,系统会自动将word的内容加载进去。此时 点击右上角编辑,Ctrl+A复制所有内容

    打开UEditor,Ctrl+V 粘贴,搞定~

    注意事项

    建议使用Chrome浏览器操作

    方法二:
    分享一个更为强大的控件,详细内容可参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/07/%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%b2%98%e8%b4%b4word%e5%86%85%e5%ae%b9/

    讨论群:223813913

    展开全文
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。... 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录下,不用npm安装。...

    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中的所有图片

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

    展开全文
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ...

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

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

     

    http://blog.ncmem.com/wordpress/2019/10/12/%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8tinymce%e6%94%af%e6%8c%81%e4%bb%8eword%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e4%bf%9d%e7%95%99%e6%a0%bc%e5%bc%8f%e5%92%8c%e5%9b%be%e7%89%87%e7%9a%84/

    以vue为例说明:

     

    以vue为例说明:

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

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

     

     

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

     

     

    代码参数配置如图:

     

     

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

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

     

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

     

    展开全文
  • 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到...
  • tinymce是很优秀的一款富文本编辑器,可以去官网下载。... 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用。 ... 以vue为例说明: 将tinymce下载后放到static目录下,不用npm安装。...
  • 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码) 因为公司业务需要...
  • 如果需要复制粘贴的是一节的内容,也就是一块完整的内容,最好用布局-分隔符-下一页插入一个分节符,然后只修改这一节的网格。 修改,使网格只应用于一节,如下图所示。 尾声 笔者不建议取消右键-段落-对齐到网格,...
  • 使用textarea能粘贴的时候保留格式。 使用input粘贴的时候格式会丢失。 const input = document.createElement('textarea'); document.body.appendChild(input); input.value = “复制我呀”; // input....
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找到UM.plugins['autoupload'],然后...
  • vim复制保留原有格式

    千次阅读 2016-02-19 14:21:12
    我们一般会从某个地方,比如网页或者其他的VIM中复制文本信息,但发现粘贴后,格式完全变了。 解决方法: 在执行前进行: :set paste 操作 执行后也可以关闭它: :set nopaste 如果想看它的详细情况,还可以:...
  • 每次从外面复制字符串进eclipse时总会给我加上一些不需要的转义字符,如图: 原内容是:http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212559089721.mp4 更改方法: Window -> Preferences -> Java -> ...
  • 而经过复制粘贴后,表格的格式可能会发送变化。与其在复制后再进行进一步格式调整,浪费多余的时间。最好的方法当然是在复制的过程中也保留表格原格式,可具体该如何操作?这里有4个方法教给大家! 一、Ctrl键拖拉...
  • 而且能够保留Word样式。 图片上传完后,编辑器里面的图片地址也全部都改成了服务器的图片地址了, 所有代码已经全部传到网上,有需要的朋友可以直接下载使用,http://blog.ncmem.com/wordpress/2019/08/07/javaword...
  • 由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题 考虑到...
  • Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成...
  • umeditor+粘贴word图片 – 泽优软件博客 以vue为例说明: 将tinymce下载后放到static目录下,不用npm安装。 powerpaste放到\static\tinymce\plugins目录下 在index.html中引入tinymce.min.js。 代码...
  • 而且能够保留Word样式。 图片上传完后,编辑器里面的图片地址也全部都改成了服务器的图片地址了, 所有代码已经全部传到网上,有需要的朋友可以直接下载使用,http://blog.ncmem.com/wordpress/2019/08/07/javaword...
  • 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码) 因为公司业务需要...
  • kindeditor 复制粘贴 去除格式 设置

    千次阅读 2018-04-23 19:34:46
    粘贴类型:0(禁止粘贴),1(纯文本粘贴),2(HTML粘贴)<link rel="stylesheet" href="/editor/themes/default/default.css" /><script charset="utf-8" src="/editor/kindedito...
  • 那么,当我们要进行复制粘贴时,如何保证粘贴的数据保留原有的格式(包括行高列宽都不能变)。 笔者以一个模板设计为例进行说明。 模板表如图1 所示。 图1 根据模板表生成表格的效果如图2所示。 图2 使用Copy方法...
  • import pyrfc, json import tablib from datetime import datetime import win32com.client, os, shutil, ... file = r'D:\code\maria_po_transfer\t2\dn_template.xls' xl.DisplayAlerts = False xl.Visible = True w
  • 1.为什么用word复制粘贴后文档的格式很乱使用word粘贴的文档格式很乱的原因是没有设置默认粘贴为仅保留文本,导致源文档的格式与当前文档格式不一致导致混乱。具体设置方法如下:1、在电脑桌面中找到word软件的快捷...
  • 在Office家族中,有很多通用技巧,而复制粘贴绝对是出镜率最高的之一。可是,99%的人都只是会Ctrl+C而已,对于复制粘贴的强大还一无所知。比直接粘贴强大百倍的选择性粘贴,5个常用技巧你知道几个?/ 1 /清洗杂乱...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,128
精华内容 10,051
关键字:

复制粘贴怎么保留格式