contenteditable属性的div 复制word图片粘贴不显示分析

最新推荐文章于 2023-12-14 03:30:00 发布
最新推荐文章于 2023-12-14 03:30:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： Java 文章标签： contenteditable 路径 图片 复制粘贴
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenke8619/article/details/80070800
版权

    在服务器访问时,复制word照片后,粘贴到contenteditable属性的div中,只能显示的轮廓里面的内容却无法显示.

    在本地打开时,可以查看到图片内容.


    原因:

    在服务器访问时,路径是相对服务器的.复制word的图片,实质是复制word存放在临时文件夹中的图片,黏贴到地址栏中时,检索不到路径,所以无法显示.

    解决方法:

    将word中的图片另存为到一个具体的文件夹中,然后再复制粘贴即可.


句号君DoubleLee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div属性中contenteditable="plaintext-only"的复制粘贴问题
lbn2676043895的博客
01-03 3026
当前项目中使用到了 ，此时无法像input中自由复制粘贴，所以需要使用一段代码放在mounted中执行监听即可 //输入框内复制粘贴功能 document.querySelector('div[contenteditable="plaintext-only"]').addEventListener("paste",function(e){ e.stopPropag...
设置contenteditable属性的div粘贴图片问题
ZF的博客
09-15 2020
需求：要一个能粘贴图片的文本框，并且图片要先上传至后端进行安全校验，拿到返回的图片地址进行输入。 思路：普通的input框无法粘贴图片，联想到编辑器原理，可以使用div加html5新增的contenteditable属性来实现上述需求。 然后监听粘贴事件，判断是否是图片 ...
contenteditable=“true“属性的标签,如何处理复制粘贴时携带的样式
weixin_49205615的博客
08-17 763
contenteditable=“true“属性的标签,如何处理复制粘贴时携带的样式
div效果：弹出div，不能进行复制和…
newnessayuan的专栏
01-31 735
<!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"> <meta http-equiv="Content-Type" c
web前端之复制图片到div中、使用contenteditable属性把元素变为可编辑状态、FileReader
最新发布
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
12-14 2175
web前端之复制图片到div中、使用contenteditable属性把元素变为可编辑状态、FileReader
Vue中div contenteditable 的光标定位方法
10-18
为了让用户在div元素中输入内容，我们可以给这个div元素添加`contenteditable`属性。然而，当我们在Vue组件中处理这种输入时，经常遇到光标定位的问题，尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将...
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可...要使div可编辑 必须 加入 contentEditable="true" 这个属性。 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelectio
js之向div contenteditable光标位置添加字符.html
08-07
主要是div通过contenteditable实现可编辑状态，可以实现按钮点击在光标处添加字符的功能
让编辑器支持word复制黏贴、截屏的js代码
10-21
为了使用这些功能，你需要创建一个具有`contenteditable`属性的元素，例如一个div或iframe，并将这个元素传递给`Edit`构造函数。例如，你可以这样创建一个编辑器实例： ```javascript var editElement = $("#edit")...
Paste_ContentEditable_DIV
07-03
卡片设计通常包含标题、内容和可能的操作按钮，可以用于显示列表项、文章摘要、图片等。 结合标签"JavaScript"，我们可以推测这个项目是利用JavaScript编程语言来实现的，可能包括DOM操作、事件监听、函数封装等...
解决网页上的文字不能复制
D_bel的博客
04-13 1589
在页面上按f12，打开控制台，输入：document.body.contentEditable=true，然后回车即可。有些网页上不能复制，可以通过修改页面属性来复制。
html 只复制纯文本，富文本中粘贴去掉css样式和其他标签，禁止复制等等
PrimaryColor
03-27 2536
html中并不存在通过样式就可以控制复制纯文本，不过可以通过样式控制禁止复制的样式： .no_copy{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; } 在网页中复
HTML实现在线预览Excel,word,ppt
weixin_34258838的博客
01-26 7840
使用office提供的在线预览功能https://view.officeapps.live....src后面接你需要预览的文件下载地址.如果不能实现预览功能,提示报错请检查http返回的Content-Type是否正确 当从浏览器返回一个文件时,需要指定ContentType,以下是Office2007对应的值:"application/...
HTML WORD在线阅读
路漫漫 修远兮
04-22 9177
替换src="test/系统操作手册.doc" 路径为服务器要显示的WORD文档就好了 可以阅读，可以编辑，但是不能保存。 弊端：客户端要已经装有WORD。（因为要调用客户端的WORD）             阅读前，会弹框是，打开还是保存，如果是打开就是阅读，保存就直接下到本地了 -------------------另外这个百度过来的可以参考下，这个我本人就亲自实验过了，上面
富文本编辑器复制word文档中的图片
Jioho的博客
07-29 7341
title: 富文本编辑器复制word文档中的图片 date: 2020-06-24 sidebar: auto categories: 前端 tags: 富文本编辑器 word文档 文章有点长，感觉每次写文章都特别啰嗦，如果不想看过程的话直接跳到总结，那边有核心的方法~ 富文本编辑器复制 word 文档中的图片 问题点：从 word 文档复制进来的内容的图片都是 file:/// 协议，这时候如果我们的页面是 http://或者 https:// 协议的话，就不允许读取图片了。 除非页面也是.
Android WebView无法调起复制粘贴框
u011960123的博客
11-03 4562
Android WebView无法调起复制粘贴框；Webview输入框长按不提示粘贴；输入框长按会报错webView Unable to add window； -------------------------- 系统是自带默认复制粘贴方法的，所以理论上只要不在OnLongClickListener中return true屏蔽，长按都会调起复制粘贴的。 最近写了个Webview发现死活都无...
contenteditable可编辑div插入图片
热门推荐
不求甚解的博客
11-14 1万+
可编辑div也就是常说的富文本编辑器，自己手动做一个富文本编辑器。需要设置div的可编辑属性contenteditable="true" &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;富文本上传图片
浏览器 实现复制粘贴 上传图片， js实现粘贴图片预览功能
业余前端的职业经历
08-06 2047
产品大大，突然收到用户反馈说，每次上传图片选择图片，太慢了 能不能 实现复制粘贴功能，直接在桌面上 复制下图片， ctrl + v 就可以 是实现上传了， 哎 程序员太难了 但是 大概应该是这个样子了 是不是 这样就 实现效果了呢 其实这个是元素的一个 paste事件 监听， 但是 是有条件的哈 （例如，在 或者 contenteditable 属性设置为 true的元) <textarea name="" id="" cols="30" rows="10"></textarea&g
我是想插入到有contenteditable属性的div中
05-27
如果您想将新节点插入到具有`contenteditable`属性的`div`元素中，并将光标设置在新节点的后面，可以使用以下代码： ```javascript // 创建新节点 var newNode = document.createElement("div"); newNode.innerHTML = "这是新节点"; // 获取要插入的目标元素 var targetElement = document.getElementById("targetElement"); // 将新节点插入到目标元素中 targetElement.appendChild(newNode); // 创建 Range 对象并设置其范围 var range = document.createRange(); range.setStartAfter(newNode); range.setEndAfter(newNode); // 获取当前 Selection 对象并设置其范围 var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); ``` 在上面的代码中，我们首先创建了一个新的`div`节点，并设置了其`innerHTML`属性。然后，我们获取了具有`contenteditable`属性的目标元素，并将新节点插入到其中。接下来，我们创建了一个`Range`对象，并将其范围设置为新节点的末尾位置。最后，我们获取了当前文档的`Selection`对象，并将其范围设置为新创建的`Range`对象，这样就可以将光标设置在新节点的后面了。 需要注意的是，如果您想将新节点插入到具有`contenteditable`属性的元素中，您需要确保目标元素具有`contenteditable`属性，并且光标已经位于该元素中。否则，您需要在插入新节点之前将光标设置到该元素中，以确保新节点被插入到正确的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值