ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – Contenteditable – 从插入符号提取文本到元素结尾

2019-09-03 11:37:13  阅读:312  来源: 互联网

标签:javascript select contenteditable extract caret


在略读所有可能的问题和答案后,我将以这种方式尝试.

我正在编写一个RTE,但没有成功地在一个可信的元素中提取文本.
这样做的原因是,每个浏览器以稍微不同的方式处理节点和按键(#13)事件(例如,一个创建’br’,另一个’div’,’p’等)
为了使这一切保持一致,我正在编写一个跨浏览器编辑器,它使用e.preventDefault()来杀死所有默认操作;

以下场景:

1)用户点击#13键(检查)

2)检测到插入位置(检查)

3)在插入符号的元素之后创建新的p(aragraph)(检查)

4)如果插入符号和元素的结尾之间的文本(节点),提取它(???)

5)将文本(节点)放入新创建的p(aragraph)(检查)

你可以想象,除了第4点,一切都有效.

在众所周知的js rangy库中有类似的功能,其中提取了特定的选择.

我需要的是:从插入符号到可信段落(p,h1,h2,…)元素的末尾获取并提取所有文本(当然还有标记,因此splitBoundaries).

欢迎任何线索,提示或片段!
提前致谢.

亲切的问候,
p

解决方法:

您可以通过创建一个Range对象来完成此操作,该对象包含从插入符号到包含块元素末尾的内容并调用其extractContents()方法:

function getBlockContainer(node) {
    while (node) {
        // Example block elements below, you may want to add more
        if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) {
            return node;
        }
        node = node.parentNode;
    }
}

function extractBlockContentsFromCaret() {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = getBlockContainer(selRange.endContainer);
        if (blockEl) {
            var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            return range.extractContents();
        }
    }
}

这在IE< = 8中不起作用,它不支持Range或与其他浏览器相同的选择对象.您可以使用Rangy(您提到过)来提供IE支持.只需用rangy.getSelection()替换window.getSelection().

jsFiddle:http://jsfiddle.net/LwXvk/3/

标签:javascript,select,contenteditable,extract,caret
来源: https://codeday.me/bug/20190903/1797746.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有