复制粘贴出来的是图片

summernote 复制粘贴上传图片

2020-07-10 08:14:49

现在希望能够直接复制粘贴图片，说做就做，一下是我从网上找到的例子其中样式 note-editable 是summernote自动生成出来 //summernote //监听粘贴图片 document.getElementsByClassName('note-editable')[0]....

转载：http://www.5180it.com/bbs/admin/1/98.html

 

在使用summernote过程中，经常会上传图片，但如果我们每次都点击上传图片，使用起来不是特别方便。



现在希望能够直接复制粘贴图片，说做就做，一下是我从网上找到的例子

 

其中样式 note-editable 是summernote自动生成出来

//summernote

//监听粘贴图片

document.getElementsByClassName('note-editable')[0].addEventListener('paste',function(e){

    if ( !(e.clipboardData && e.clipboardData.items) ) {

        return;

    }

    for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {

        var item = e.clipboardData.items[i];

 

        if (item.kind === "string") {

            item.getAsString(function (str) {

                console.log(str);

            })

        } else if (item.kind === "file") {

            var f= item.getAsFile();

parseFile(f, 800,function(base64){

$.post("/manager/uploadImg",{"imgStr":base64},function(data){

$('#summernote').summernote('editor.insertImage', data.msg);

          });

})

            console.log(f);

        }

    }

});

 这里说明一下这个parseFile方法，就是将图片转化为base64编码，并压缩base64编码，然后上传到服务器。

代码我也贴出来吧：

 

 这里说明一下这个parseFile方法，就是将图片转化为base64编码，并压缩base64编码，然后上传到服务器。

代码我也贴出来吧：

//压缩方法

function parseFile(file, w,callBack) {

 var reader = new FileReader();

 reader.readAsDataURL(file);

 reader.onload = function(e){

  var newImage = new Image();

  var quality = 0.7; //压缩系数0-1之间

  newImage.src = reader.result;

  console.log("原来长度",reader.result.length)

  newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要

  var imgWidth, imgHeight;

  newImage.onload = function () {

   imgWidth = this.width;

   imgHeight = this.height;

   var canvas = document.createElement("canvas");

   var ctx = canvas.getContext("2d");

   if (Math.max(imgWidth, imgHeight) > w) {

    if (imgWidth > imgHeight) {

     canvas.width = w;

     canvas.height = w * imgHeight / imgWidth;

    } else {

     canvas.height = w;

     canvas.width = w * imgWidth / imgHeight;

    }

   } else {

    canvas.width = imgWidth;

    canvas.height = imgHeight;

    quality = 0.7;

   }

   ctx.clearRect(0, 0, canvas.width, canvas.height);

   ctx.drawImage(this, 0, 0, canvas.width, canvas.height);

   var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句

   // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定

   while (base64.length / 1024 > 100) {

     quality -= 0.01;

     base64 = canvas.toDataURL("image/jpeg", quality);

   }

   // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑

   // while (base64.length / 1024 < 50) {

   // quality += 0.001;

   // base64 = canvas.toDataURL("image/jpeg", quality);

   // }

   console.log("压缩后长度",base64.length)

   callBack(base64)

  }

 }

}

该例子没有将Base64转为file的例子，我也找了个例子出来

import java.io.ByteArrayInputStream;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import org.springframework.web.multipart.MultipartFile;

 

public class BASE64DecodedMultipartFile implements MultipartFile {

 

 private final byte[] imgContent;

 private final String header;

 

 public BASE64DecodedMultipartFile(byte[] imgContent, String header) {

  this.imgContent = imgContent;

  this.header = header.split(";")[0];

 }

 

 @Override

 public String getName() {

  return System.currentTimeMillis() + Math.random() + "." + header.split("/")[1];

 }

 

 @Override

 public String getOriginalFilename() {

  return System.currentTimeMillis() + (int) Math.random() * 10000 + "." + header.split("/")[1];

 }

 

 @Override

 public String getContentType() {

  return header.split(":")[1];

 }

 

 @Override

 public boolean isEmpty() {

  return imgContent == null || imgContent.length == 0;

 }

 

 @Override

 public long getSize() {

  return imgContent.length;

 }

 

 @Override

 public byte[] getBytes() throws IOException {

  return imgContent;

 }

 

 @Override

 public InputStream getInputStream() throws IOException {

  return new ByteArrayInputStream(imgContent);

 }

 

 @Override

 public void transferTo(File file) throws IOException, IllegalStateException {

  new FileOutputStream(file).write(imgContent);

 }

}

 

import org.springframework.web.multipart.MultipartFile;

import sun.misc.BASE64Decoder;

 

public class Base64StrToImage {

 

 public static MultipartFile base64MutipartFile(String imgStr) {

  try {

   String[] baseStr = imgStr.split(",");

   BASE64Decoder base64Decoder = new BASE64Decoder();

   byte[] b = new byte[0];

   b = base64Decoder.decodeBuffer(baseStr[1]);

   for (int i = 0; i < b.length; ++i) {

    if (b[i] < 0) {

     b[i] += 256;

    }

   }

   return new BASE64DecodedMultipartFile(b, baseStr[0]);

  } catch (Exception e) {

   e.printStackTrace();

   return null;

  }

 }

}

 

通过下面的方法，我们就可以转为我们平时上传使用的MultipartFile了

         BASE64DecodedMultipartFile base64DecodedMultipartFile = null;

            if(StringUtils.isNotEmpty(imgStr)){

               base64DecodedMultipartFile = (BASE64DecodedMultipartFile) Base64StrToImage.base64MutipartFile(imgStr);

            }



在使用的过程中，我发现粘贴是可以的，但粘贴出来的图片会有两个，一个是原base64的图片，另外一个是上传到服务器返回地址的图片

 

这是就想可能的没有覆盖到原来的方法，导致重复了，以下是我修改后的例子

$(".summernote").summernote({

            height: '450px',

            //设置Dialog淡入淡出效果

            dialogsFade: true,

            fontNames: ['宋体', '微软雅黑', '楷体', '黑体', '隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',

                'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',

                'Tahoma', 'Times New Roman', 'Verdana'],

            lang: 'zh-CN',

            toolbar: [

                ['style', ['style']],

                ['font', ['bold']],

                ['color', ['color']],

                ['insert', ['myphoto']],

                ['view', ['fullscreen']]

            ],

            buttons: {

                myphoto: selectImageButton //自已定义的按钮函数

            },

            callbacks: {

             //onPaste粘贴需要重写，否则粘贴图片时出现重复的图片

             onImageUpload:function(e){

              //console.info("onImageUpload>>>>>>>>");

             },

                onPaste: function (ne) {

                     //ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);

                     var returnFlag = true;

                     var t_clipboardData;

                     if(typeof ne.clipboardData !='undefined'){

                      returnFlag = false;

                      t_clipboardData = ne.clipboardData;

                     }

                     if(typeof ne.originalEvent.clipboardData !='undefined'){

                      returnFlag = false;

                      t_clipboardData = ne.originalEvent.clipboardData;

                     }

                     if(typeof window.clipboardData !='undefined'){

                      returnFlag = false;

                      t_clipboardData = ne.originalEvent.clipboardData;

                     }

                     if(returnFlag){

                      return;

                     }

                     if(t_clipboardData==null||typeof t_clipboardData =='undefined'){

                      return;

                     }

                   for (var i = 0, len = t_clipboardData.items.length; i < len; i++) {

                       var item = t_clipboardData.items[i];

                       if (item.kind === "file") {

                           var f= item.getAsFile();

                           parseBase64File(f, 800,function(base64){

                       var formData = new FormData();

                        formData.append("imgStr", base64);

                           $.ajax( {

                               url : "/file/image/uploadImgStr",

                            data: formData,

                               type: 'post',

                               cache: false,contentType: false,processData: false,

                               beforeSend: function () {

                                   $.modal.loading("上传中，请稍后...");

                               },

                               success : function(result) {

                                $.modal.closeLoading();

                                   if (result.code == web_status.SUCCESS) {

                                    $('#summernote').summernote('editor.insertImage', result.path);

                                    $.modal.msgSuccess('上传成功')

                                   }else{

                                 $.modal.msgWarning(result.msg)

                                   }

                               },

                               error: function(data){

                                $.modal.closeLoading();

                                   $.modal.alertError("上传失败，HTTP错误。");

                               }

                           });

                  })

                       }

                   }

 

                }

            }

        })

转载：http://www.5180it.com/bbs/admin/1/98.html

收起

展开全文

粘贴板工具：PPT或Excel复制粘贴成图片问题的解决方案

2021-05-27 11:30:08

微软PPT、Excel等软件复制出来的粘贴板内容优先是图像，其次才是文字。因此，在微信等可以粘贴图像的输入框中常常是优先粘贴图像内容而非文字内容，这给微信等聊天用户带来了一定的不便。为了说明此场景，我将该问题...

粘贴板工具：PPT或Excel复制粘贴成图片问题的终极解决方案
一、小工具介绍
       针对PPT或Excel复制粘贴成图片问题，Clipboard是一个将图像粘贴板内容转化为文字粘贴板内容的小工具。下载链接：https://github.com/MarkCens/Clipboard2text/blob/master/demo/Clipboard2text.rar。代码：https://github.com/MarkCens/Clipboard2text。


使用指南

点击并按住第一个按钮，你将能够实现小窗体的拖动，注意是使用鼠标左键点击拖拽。
点击第二个按钮（一个笑脸），你将能够实现傻瓜式的复制粘贴成文字的操作。
点击第三个按钮（一个顶字），你将能够取消窗体最前。如果再次点击该按钮，那么将能再次设置窗体最前。
点击第四个按钮（一个交叉），你将能够退出这个小窗体。
下载以后，解压，运行exe文件。如果运行过程有任何问题，请留言。

二、开发背景
       微软PPT、Excel等软件复制出来的粘贴板内容优先是图像，其次才是文字。因此，在微信等可以粘贴图像的输入框中常常是优先粘贴图像内容而非文字内容，这给微信等聊天用户带来了一定的不便。为了说明此场景，我将该问题进行更详细的描述。

环境
       一个PPT文件或者Excel文件，电脑安装微软office办公软件（包括PPT、Excel等），电脑已安装微信PC版。

示范
       以PPT文件为例，我打开了一个PPT文件，如下。



       但是我的英文水平不是特别好（个人水平有限），想要将这页PPT内容复制到微信中翻译（个人偏好，因为微信聊天能保存翻译过的多条记录能给我带来很多方便，不喜勿喷）。



       然后我一波操作猛如虎，便是拿去ctrl+c、ctrl+v键复制我需要翻译的文字到微信聊天框中，想着马上就能看到翻译结果了！…结果，竟然…得到了一张图片！我人都!!!∑(ﾟДﾟノ)ノ（小声叨唠：图片我怎么翻译嘛！）



       可是图片，图片有啥子嘛。于是我拿起手机点开图片又是一波翻译操作。
       但是…还有很多张图片文件需要我如此一波又一波的操作，这让我操碎了心呐！
       心碎的我，不知道该质疑微软好还是微信好…
       这时，我突然脑瓜闪过一个想法，既然是想要得到文字，在txt文件或者只能输入文字的输入框粘贴一下再复制一下不就好了？好像是哦。于是我动用起来了txt文件，打开又是一波ctrl+c ctrl+v的操作，这确实让我体验到了复制文字粘贴文字的舒服的感觉，翻译也很快啊，因为是文字所以一下子就出来结果了。但是久了，懒惰的我发现，这是一份令人感到劳累的苦差事，我ctrl+c ctrl+v的两根手指都酸了，十分苦恼TAT。
       苦恼了几秒钟以后，我灵光一动，仿佛得到了Bjarne Stroustrup博士的指点。于是脑海中又飘过一个想法，既然我学习过C++和Qt，为什么不能写一个小工具能够进行傻瓜式的点击操作复制粘贴呢？能啊，于是我事不宜迟，立刻动手，写了一个Qt小窗口，实现了我的这个想法。

三、实现过程
       如果你只是使用这个工具，不需要浏览一下内容。下面是我实现这个工具的过程和内容。按理来说，此工具不仅仅使用与微信的聊天框，QQ聊天框、TIM聊天框以及其他可以粘贴图像的输入框都适用。


       在我的想法中，这个小窗口能够拖拽，能够点一下就复制成文字，能够始终在所有窗口最前（同时也能取消窗口最前），能够退出。所以，我分别设计了四个按钮，用来实现这四个功能。


       这第一步，我在Qt creator中设计了一个窗口界面，这个窗口界面是长宽固定，并且是一个水平布局，这水平布局里面放四个按钮，这四个按钮的长宽也是固定的。为了美观，我在界面的设计加入了QSS样式以及qrc资源文件。窗体的界面代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>120</width>
    <height>35</height>
   </rect>
  </property>
  <property name="minimumSize">
   <size>
    <width>120</width>
    <height>35</height>
   </size>
  </property>
  <property name="maximumSize">
   <size>
    <width>120</width>
    <height>35</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>-</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <property name="sizePolicy">
    <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
   <property name="minimumSize">
    <size>
     <width>120</width>
     <height>35</height>
    </size>
   </property>
   <property name="maximumSize">
    <size>
     <width>120</width>
     <height>35</height>
    </size>
   </property>
   <layout class="QHBoxLayout" name="horizontalLayout_2">
    <property name="spacing">
     <number>0</number>
    </property>
    <property name="leftMargin">
     <number>0</number>
    </property>
    <property name="topMargin">
     <number>0</number>
    </property>
    <property name="rightMargin">
     <number>0</number>
    </property>
    <property name="bottomMargin">
     <number>0</number>
    </property>
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <property name="spacing">
       <number>0</number>
      </property>
      <item>
       <widget class="QPushButton" name="main_move">
        <property name="minimumSize">
         <size>
          <width>15</width>
          <height>35</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>15</width>
          <height>35</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QPushButton{background-color:#4aabfe;color:#ffffff;font-weight:bold;border-image:url();border:0;}
QPushButton:hover{background-color:#5bbcff;}
QPushButton:pressed{background-color:#5bbcff;}</string>
        </property>
        <property name="text">
         <string/>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="main_convert">
        <property name="minimumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="styleSheet">
         <string notr="true">QPushButton{background-color:#4aabfe;color:#ffffff;font-weight:bold;border-image:url();border-image:url(:/img/icon.png);border:0;}
QPushButton:hover{background-color:#5bbcff;}
QPushButton:pressed{background-color:#5bbcff;}</string>
        </property>
        <property name="text">
         <string/>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="main_top">
        <property name="minimumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="font">
         <font>
          <family>Microsoft YaHei UI</family>
          <pointsize>12</pointsize>
          <weight>75</weight>
          <bold>true</bold>
         </font>
        </property>
        <property name="styleSheet">
         <string notr="true">QPushButton{background-color:#4aabfe;color:#ffffff;font-weight:bold;border-image:url();border:0;}
QPushButton:hover{background-color:#5bbcff;}
QPushButton:pressed{background-color:#5bbcff;}</string>
        </property>
        <property name="text">
         <string>顶</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="main_close">
        <property name="minimumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>35</width>
          <height>35</height>
         </size>
        </property>
        <property name="font">
         <font>
          <family>Microsoft YaHei UI</family>
          <pointsize>12</pointsize>
          <weight>75</weight>
          <bold>true</bold>
         </font>
        </property>
        <property name="styleSheet">
         <string notr="true">QPushButton{background-color:#4aabfe;color:#ffffff;font-weight:bold;border-image:url(:/img/close.png);border:5px 5px 5px 5px;}
QPushButton:hover{background-color:#ff5747;}
QPushButton:pressed{background-color:#5bbcff;}</string>
        </property>
        <property name="text">
         <string/>
        </property>
        <property name="iconSize">
         <size>
          <width>16</width>
          <height>16</height>
         </size>
        </property>
       </widget>
      </item>
     </layout>
    </item>
   </layout>
  </widget>
 </widget>
 <resources/>
 <connections/>
</ui>

       按钮需要实现它的点击事件或者拖拽事件，因此我在窗口的头文件定义了相关的函数。由于Qt中是利用信号和槽实现事件监听的，因此如果你想理解下面的代码，你需要实现了解Qt的信号和槽机制。窗体的头文件如下：
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QIcon>
#include <QPoint>
#include <QMouseEvent>
#include <QApplication>
#include <QClipboard>
#include <QString>
#include <QLineEdit>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void mousePressEvent(QMouseEvent *);    // 实现窗体移动的事件（鼠标点击事件）
    void mouseMoveEvent(QMouseEvent *);     // 实现窗体移动的事件（鼠标移动事件）

public slots:
    void click_bt_top();    // 槽：窗体最前点击函数
    void click_bt_close();  // 槽：窗体关闭点击函数
    void paste();           // 槽：复制点击函数（点击实现傻瓜式图片粘贴板内容2文字粘贴板内容）

private:
    Ui::MainWindow *ui;
    bool m_is_top = false;  // 变量：用于实现窗体最前/取消窗体最前
    QPoint m_pre_pos;       // 变量：用于实现窗体拖拽移动
};
#endif // MAINWINDOW_H

窗体的cpp文件如下：
#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow){
    ui->setupUi(this);
    // 隐藏窗体标题栏
    this->setWindowFlags(Qt::FramelessWindowHint);
    // 设置窗体icon，这个qtc资源图片路径
    this->setWindowIcon(QIcon(":/img/icon.png"));
    // 设置窗体最前
    click_bt_top();
    // 连接信号和槽（设置程序需要的各种事件监听）
    connect(ui->main_convert, &QPushButton::clicked, this, &MainWindow::paste);
    connect(ui->main_top, &QPushButton::clicked, this, &MainWindow::click_bt_top);
    connect(ui->main_close, &QPushButton::clicked, this, &MainWindow::click_bt_close);
}

MainWindow::~MainWindow(){
    delete ui;
}

void MainWindow::click_bt_top(){
    // 如果不是窗体最前
    if (this->m_is_top == false){
        // 设置为窗体最前
        this->m_is_top = true;
        // 更新按钮的样式
        ui->main_top->setStyleSheet(""
                                    "QPushButton{background-color:#5bbcff;color:#ffffff;font-weight:bold;border-image:url();border:0;}"
                                    "QPushButton:hover{background-color:#4aabfe;}"
                                    "QPushButton:pressed{background-color:#4aabfe;}");
        // 设置窗体Flags，前者是隐藏窗口标题栏，后者是保持窗体最前
        this->setWindowFlags(Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint);
        this->showNormal();
    }else{  // 如果已经是窗体最前
        this->m_is_top = false;
        // 取消设置为窗体最前
        ui->main_top->setStyleSheet(""
                                    "QPushButton{background-color:#4aabfe;color:#ffffff;font-weight:bold;border-image:url();border:0;}"
                                    "QPushButton:hover{background-color:#5bbcff;}"
                                    "QPushButton:pressed{background-color:#5bbcff;}");
        // 设置窗体Flags，意思是保持当前窗口Flags但除了保持窗体最前
        this->setWindowFlags(this->windowFlags() & ~Qt::WindowStaysOnTopHint);
        this->showNormal();
    }
}

void MainWindow::click_bt_close(){
    // 关闭窗口，退出程序
    this->close();
    exit(0);
}

void MainWindow::paste(){
    // 获取系统剪贴板指针
    QClipboard *clipboard = QApplication::clipboard();
    // 获取剪贴板文本信息
    QString content = clipboard->text();
    // 设置剪贴板内容
    clipboard->setText(content);
}

void MainWindow::mouseMoveEvent(QMouseEvent *lpEvent){
    // 鼠标左键实现拖拽
    if (lpEvent->buttons() & Qt::LeftButton){
        // 获取位置
        QPoint pos = lpEvent->globalPos();
        // 移动窗体
        move(pos - m_pre_pos);
    }
}

void MainWindow::mousePressEvent(QMouseEvent *lpEvent){
    // 鼠标左键实现拖拽
    if (lpEvent->button() == Qt::LeftButton){
        // 获取位置
        m_pre_pos = lpEvent->globalPos() - frameGeometry().topLeft();
    }
}

       点击Qt creator绿色的运行按钮，便完成了我的小工具开发。
四、结束语
       如果你不想写一遍代码，没关系，请到我的GitHub项目中下载这个软件，解压点击就能运行使用这个方便的小工具。
       如果你有更好的建议和解决方案，请在博客中留言，让更多的朋友享受到复制粘贴的快乐。

       如果你读完以后觉得快乐，请为我点赞，我将感激不尽！

收起

展开全文

qt c++ qtcreator

支持复制粘贴word图片的eWebEditor编辑器

2020-11-09 15:00:53

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

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

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

方法一：

工具/原料

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

方法/步骤

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

导入后，系统会自动将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

收起

展开全文

支持复制粘贴word图片的HTML编辑器

2020-11-06 15:58:40

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

方法一：

工具/原料

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

方法/步骤

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

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

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

注意事项

建议使用Chrome浏览器操作

讨论群：223813913

收起

展开全文

wangEditor富文本编辑器支持从word复制粘贴保留格式和图片的插件
2020-07-09 13:45:07
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
百度富文本编辑器支持从word复制粘贴保留格式和图片的插件
2020-07-08 14:27:39
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
WordPress直接复制粘贴图片插件Imagepaste
2020-10-02 07:49:11
可以直接复制截图图片的这是非常好用的地方具体的安装方法不过多介绍 wordpress插件后台直接搜索Imagepaste 用效果：截图后直接粘贴就粘贴到WordPress的文章编辑中来了，我是不是又懒了许多！哦，对了QQ截图是不...
收起
富文本编辑器的使用和图片上传，复制粘贴图片上传
2020-06-12 09:32:57
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
xheditor编辑器复制粘贴图片上传
2020-06-15 17:32:24
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
VC++ 图片复制到粘贴板
2020-01-04 23:32:52
经常会用到在本地硬盘里面复制一个图片文件（静态、动态），然后粘贴到QQ聊天窗口，图片就直接显示出来了。到底是怎么实现的呢？首先复制文件，通过程序读取粘贴板内容分析，发现格式如下： Version:0.9 StartHTML...
收起
OneNote复制内容粘贴变成图片解决方案 Ditto教程
万次阅读 2018-12-27 09:44:14
在OneNote里面复制内容,粘贴到其他地方总是变成图片。这个问题大家都可能遇到过。以前呢，我是先从OneNote...在你复制完OneNote内容后，使用这个功能 粘贴出来的就是纯文本了。软件下载地址 Ditto 先安装，...
收起
OneNote Ditto
百度ueditor编辑器复制粘贴图片上传
2020-06-12 18:02:36
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
复制粘贴网页内容（文字图片等）受限制如何办（图片复制关注第三种方法）
2020-11-23 15:57:37
但现在很多网站都限制相应的大篇幅复制，要么让你注册会员，要么让你买会员，各种限制让你不得不适用snip来进行截图操作，不过有的时候截图的图片只可以进行参考，无法进行编辑，现在提出使用两种方法来进行复制 ...
收起
VC++ 图片复制到粘贴板（续）
2020-02-25 11:52:48
在上一篇文章中讲到如何将gif复制到粘贴板，粘贴到QQ聊天...这里具体讲解一下这些数字是怎么计算出来的：例如： Version:0.9 StartHTML:00000097 EndHTML:00000209 StartFragment:00000113 EndFragment:0000017...
收起
mac系统文本复制粘贴问题
千次阅读 2017-05-27 11:14:37
首先是windows和mac 通用的地方，那就是有一些网站并不能直接复制文本内容，其中的某些图片类信息在复制之后是没有办法展现出来的，这种问题要解决起来就很简单了，先把照片保存在本地电脑，然后在
收起
mac 格式
ckeditor粘贴word文档图片的技术
2021-02-19 14:52:44
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html html5
ckeditor粘贴word文档图片的控件
2021-02-03 15:19:50
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html5 html
ckeditor粘贴word图片且图片自动上传组件
2020-09-21 14:03:31
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
eWebEditor粘贴word图片且图片文件自动上传功能
2021-01-13 15:10:07
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html html5
fckeditor粘贴word图片且图片文件自动上传功能
2021-01-07 15:07:15
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html html5
ckeditor粘贴word图片且图片文件自动上传控件
2020-09-18 14:20:11
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
CKEditor 图片粘贴上传，实现图文粘贴，图片自动上传
2020-08-26 14:07:23
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
帝国CMS粘贴word图片且图片文件自动上传功能
2021-01-20 14:50:30
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html html5
求大佬告知python怎么将图片和文本一起复制到剪切板然后打印出来?
2020-10-19 09:29:03
想要通过python实现对win10操作复制功能，目前可以复制图片和文本，但是打印出来的时候只有一个内容，要么是图片要么是文本（QQ上粘贴是图片，其他渠道粘贴是文本）。不能同时粘贴出来 ``` import win32...
收起
python
CuteEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
2020-12-01 15:15:08
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript css vue.js html5 html
tinymce上粘贴从word中copy的图片和文字
2020-06-17 14:06:50
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
fckeditor上粘贴从word中copy的图片和文字
2020-06-17 16:48:30
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5
百度编辑器实现ctrl+v粘贴图片并上传、word粘贴带图片
2020-11-27 14:59:08
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
富文本编辑器实现ctrl+v粘贴图片并上传、word粘贴带图片
2020-12-07 15:16:11
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
wangEditor直接粘贴图片实现
2020-06-18 10:13:54
很多时候我们用一些管理系统的时候，发布新闻、公告等文字类信息时，希望能很快的将word里面的内容直接粘贴到富文本编辑器里面，然后发布出来。减少排版复杂的工作量。下面是借用百度doc 来快速实现这个word 粘贴...
收起
javascript vue.js html5

summernote 复制粘贴上传图片

转载：http://www.5180it.com/bbs/admin/1/98.html

在使用summernote过程中，经常会上传图片，但如果我们每次都点击上传图片，使用起来不是特别方便。

现在希望能够直接复制粘贴图片，说做就做，一下是我从网上找到的例子

这里说明一下这个parseFile方法，就是将图片转化为base64编码，并压缩base64编码，然后上传到服务器。

该例子没有将Base64转为file的例子，我也找了个例子出来

在使用的过程中，我发现粘贴是可以的，但粘贴出来的图片会有两个，一个是原base64的图片，另外一个是上传到服务器返回地址的图片

粘贴板工具：PPT或Excel复制粘贴成图片问题的解决方案

粘贴板工具：PPT或Excel复制粘贴成图片问题的终极解决方案

一、小工具介绍

使用指南

二、开发背景

环境

示范

三、实现过程

四、结束语

支持复制粘贴word图片的eWebEditor编辑器

工具/原料

方法/步骤

注意事项

支持复制粘贴word图片的HTML编辑器

工具/原料

方法/步骤

注意事项

wangEditor富文本编辑器支持从word复制粘贴保留格式和图片的插件

百度富文本编辑器支持从word复制粘贴保留格式和图片的插件

WordPress直接复制粘贴图片插件Imagepaste

富文本编辑器的使用和图片上传，复制粘贴图片上传

xheditor编辑器复制粘贴图片上传

VC++ 图片复制到粘贴板

OneNote复制内容 粘贴变成图片解决方案 Ditto教程

百度ueditor编辑器复制粘贴图片上传

复制粘贴网页内容（文字图片等）受限制如何办（图片复制关注第三种方法）

VC++ 图片复制到粘贴板（续）

mac系统文本复制粘贴问题

ckeditor粘贴word文档图片的技术

ckeditor粘贴word文档图片的控件

ckeditor粘贴word图片且图片自动上传组件

eWebEditor粘贴word图片且图片文件自动上传功能

fckeditor粘贴word图片且图片文件自动上传功能

ckeditor粘贴word图片且图片文件自动上传控件

CKEditor 图片粘贴上传，实现图文粘贴，图片自动上传

帝国CMS粘贴word图片且图片文件自动上传功能

求大佬告知python怎么将图片和文本一起复制到剪切板然后打印出来?

CuteEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

tinymce上粘贴从word中copy的图片和文字

fckeditor上粘贴从word中copy的图片和文字

百度编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片

富文本编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片

wangEditor直接粘贴图片实现

复制粘贴出来的是图片

OneNote复制内容粘贴变成图片解决方案 Ditto教程

百度编辑器实现ctrl+v粘贴图片并上传、word粘贴带图片

富文本编辑器实现ctrl+v粘贴图片并上传、word粘贴带图片