Js去格式粘贴和指定位置插入内容

最新推荐文章于 2024-01-11 17:40:15 发布

Markov Zheng

最新推荐文章于 2024-01-11 17:40:15 发布

阅读量586

点赞数 2

分类专栏：网络学习日志 HTML JavaScript 文章标签： javascript html node.js

本文链接：https://blog.csdn.net/marko_zheng/article/details/120344029

版权

网络学习日志同时被 3 个专栏收录

111 篇文章 4 订阅

订阅专栏

JavaScript

49 篇文章 1 订阅

订阅专栏

HTML

37 篇文章 0 订阅

订阅专栏

Js去格式粘贴和指定位置插入内容

描述：

uniapp项目，使用webview新建了一个脱离于项目而存在的一个编辑器，并实现数据交互，事件共同的功能，此处仅记录去格式粘贴和指定位置插入内容

页面中新建了div设置  contenteditable="true" 允许在指定位置插入复制 粘贴的内容

指定位置插入内容思路

通过设定contenteditable=true开启div的编辑模式

2个步骤：
① 获取DIV中的光标位置
② 改变光标位置

去格式粘贴思路

document绑定paste事件然后读取剪切板内容并且保留换行

核心代码

html结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
        <div class="head">
			<span id="confirm">确定</span>
			<span id="clear">取消</span>
		</div>
		<div tabindex="0" id="div" contenteditable="true" ></div>
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript">
            **********
        </script>
	</body>
</html>

Js核心代码：

var ss = window.getSelection() || null;
var t = true;
// 指定位置插入图片
// 上传图片
function uploadImg(url) {
    let div1 = document.getElementById("div");
    let currentFocus = document.activeElement.id;
    let random = Math.floor(Math.random() * 100)
    let o = 'b' + random
    let q = "<img src=\"" + url + "\" style=\"width:100%;height:auto\" οnlοad=\"loadsuccess(" + random +
        ")\"/><div  id=\"" + o + "\"></div><br/>";

    if (div1.id == currentFocus) {
        insertHtmlAtCaret(q)
    } else {
        div1.innerHTML = div1.innerHTML + q
    }
}
function insertHtmlAtCaret(html) {
    var sel, range;
    if (ss) {
        sel = ss;
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents && range.deleteContents();
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(),
                node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        } else {
            console.log('添加到最后', sel);
            // IE < 9
            let div1 = document.getElementById("div");
            div1.innerHTML = div1.innerHTML + html
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}


// 去格式粘贴 仅删除样式  保留换行

//换行 
function replaceBr(key) { 
    key = key.replace(/<\/?.+?>/g,"<br/>"); 
    key = key.replace(/[\r\n]/g, "<br/>"); 
    return key; 
} 
// 去格式粘贴
document.addEventListener('paste',function(event){
    // event.preventDefault();//先去除默认事件
    if (event.clipboardData || event.originalEvent) {
        var clipboardData = (event.clipboardData || window.clipboardData);
        var val = clipboardData.getData('text/plain');
        // var re=/(\n(?=(\n+)))+/g
        var str= replaceBr(val)
        event.preventDefault();
        // console.log(str)
        insertHtmlAtCaret(str)

    }
})

Markov Zheng

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Js去格式粘贴和指定位置插入内容

Js去格式粘贴和指定位置插入内容描述： uniapp项目，使用webview新建了一个脱离于项目而存在的一个编辑器，并实现数据交互，事件共同的功能，此处仅记录去格式粘贴和指定位置插入内容页面中新建了div设置 contenteditable="true" 允许在指定位置插入复制粘贴的内容指定位置插入内容思路通过设定contenteditable=true开启div的编辑模式2个步骤：① 获取DIV中的光标位置② 改变光标位置去格式粘贴思路document绑定paste事件然
复制链接

扫一扫