首页 > 其他分享 >在开启contenteditable可编辑div光标处插入图片

在开启contenteditable可编辑div光标处插入图片

时间:2023-09-20 19:24:06浏览次数:35  
标签:selection contenteditable img newRange range var div 光标

  $("#Content").focus();

// 创建 img 元素
var img = document.createElement('img');
img.src = 'xxxx';
img.style.display = 'block';

// 插入 img 元素
if (window.getSelection) {
var editableDiv = document.getElementById('Content')
var selection = window.getSelection();
var range = selection.getRangeAt(0);
// 判断光标位置是否在 img 元素之前,防止将新img插入到旧img标签内部
if (range.startContainer.tagName.toLowerCase() === 'img') {
var previousImg = range.startContainer;
editableDiv.insertBefore(img, previousImg.previousSibling);
} else {
range.insertNode(img);
}

// 将光标移到新插入的 img 下一行的首位
var newRange = document.createRange();
newRange.setStartAfter(img);
newRange.collapse(true);

// 清空之前的选区并设置新的选区
selection.removeAllRanges();
selection.addRange(newRange);
}

$("#Content").focus();

标签:selection,contenteditable,img,newRange,range,var,div,光标
From: https://www.cnblogs.com/QJZY/p/17718163.html

相关文章

  • <div>标签
    1.盒子模型(上右下左顺时针顺序设置属性值)1.1外边距margin1.2内边距padding1.3边框bordersoliddashed例如:(border:1pxdashedblack)意思就是设置1个像素的黑色虚线边框1.4阴影box-shadow:h-shadow水平阴影的位置  v-shadow垂直阴影的位置  blur模糊距离  sprea......
  • div 拖动例子
    第一个是简单的例子:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html> <head> <title>dragTest</title> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <......
  • Educational Codeforces Round 154 (Rated for Div. 2) A-D
    传送门:edu154/div2A.PrimeDeletion题意:给定一个0-9的排列,要求一个长度>=2的子序列,使得该子序列是质数做法:考虑31或者13即可。不过当时没有立刻想到,感觉1000以内的质数必有答案,打了暴力。用时就多了点。Code#include<bits/stdc++.h>usingnamespacestd;intpri[10......
  • CF1870 div1+div2做题记录
    A题面挺蠢的,无解条件为\(n<k\)或\(x<k-1\),即\(\mathop{\mathrm{mex}}\not=k\)。先选\(0\simk-1\),再选能选的最大值,当\(x=k\),选\(x-1\),否则选\(x\)。点击查看代码#include<bits/stdc++.h>#defineullunsignedlonglong#definelllonglong#definepiipai......
  • CodeTON Round 6 (Div. 1 + Div. 2)( A-D )
    A.MEXanizedArray下次还得得签快一点,嘉心糖4分就过了思路一个简单的讨论nkx之间关系就行完整代码#include<bits/stdc++.h>usingnamespacestd;#definelllonglonginlineintread(){ints=0,w=1;charg=getchar();while(g>'9'||g<'0'){if(g=......
  • CodeTON Round 6 (Div. 1 + Div. 2, Rated, Prizes!)(A-D)
    CodeTONRound6(Div.1+Div.2,Rated,Prizes!)A.让你找mex为k的n个数,这n个数从0-x,问n个数的和最大值是多少先判断不行的。然后行的肯定有0-k-1,剩下还有就选x就行。查看代码#include<iostream>usingnamespacestd;typedeflonglongll;voidsolve(){ intn,k,x;......
  • cf1869 div.1,div.2做题记录
    赛时总结div.2A题面对于任意一个区间,我们可以通过一次操作将区间内的数变得全部相同。如果区间内的全部数都相同,那么我们再做一遍区间操作,当这个区间长度为偶数时,区间异或和为\(0\),会清空区间;当区间长度为奇数时,区间内的数不会发生改变。但我们可以将一个长度为奇数的区间拆成......
  • Codeforces Round 897 (Div. 2) A-E
    A.green_gold_dog,arrayandpermutation题意:给出一个长为\(n\)的数组\(a\),找到一个长为\(n\)的排列\(b\),使得\(a\)与\(b\)对应位置上的元素的差尽可能大Solution将数组\(a\)排序,然后令排列\(n,n-1,...,2,1\)对应到对应的元素即可structnode{intx,id;boolope......
  • css让某个view/div 定在某一个位置不动
    position:absolute 可以定位在某个位置,但是会跟着滚动条的位置而改变。postion:fixed可以定位在某个位置,并且也不会跟着滚动条的位置而改变。 postion:fixedleft:0px;bottom:0px; 会定位在底部左边位置。比如返回顶部/返回等。......
  • div 让a内容居中方法
    <div>标签是HTML中的一个重要标签,它代表了一个文档中的一个分割区块或一个部分。在<div>标签中,我们可以放置各种内容,包括文本、图像、链接等等。有时候,我们需要将其中的链接<a>标签的内容水平居中显示,这就需要使用CSS设置div内部链接的居中显示。本文将详细讲解如何使用CSS使得<di......