美文网首页前端交流圈
可编辑div问题总结(光标,显示等)

可编辑div问题总结(光标,显示等)

作者: lulu_c | 来源:发表于2020-06-30 16:17 被阅读0次

背景:需要编写一个简单的文本输入框,要求可以添加超链接,并且超链接可以修改内容,超链接在文本框中只显示标题(类似在html中显示a标签一样)
目前的基于vue框架:

html:

<div 
ref="myeditor" 
contenteditable="true" 
class="myeditor" 
v-html="text.textarea" 
@click="editlink($event)" 
@input="myeditorChange"
@keypress.enter="myeditorenter($event)"  // 监听回车
@blur="myeditorblur">
</div>

contenteditable属性可以把div变成可编辑状态,这是开发文本编辑框的基础。添加该属性后基本是满足一般文本输入。

1.换车键问题:
在可编辑div回车会在文本框中添加div标签(也可能是p标签),所以需要在div中监控回车事件并取消默认事件

 myeditorenter(e) {
            e.preventDefault();
            RangeUtil.insertHtmlAtCaret('<br/>')  // 在当前光标插入文本
            // this.$refs.myeditor.innerHTML = this.$refs.myeditor.innerHTML+'<br/>'
        },

2.获取div的内容
需要使用this.$refs.myeditor.innerHTML来获取,text.textarea虽然绑定了值但实际是获取不到的,除非有进行手动赋值。

3.添加超链接
这里主要讲讲添加的方式,具体可根据需求来。
因为我这里是点击一个按钮打开弹框的方式来添加超链接,所以:

  • 首先可以调用保存光标位置的方法保存失焦前的光标位置saveRange
  • 在弹框中填写完所需要的内容后,调用基于之前保存光标插入内容的方法insertContent

这样能确保超链接是添加在你之前光标定位的地方,不然就会出现超链接只能添加在文本尾部的情况。

涉及光标的方法:

// 光标类方法
export const RangeUtil = {
    // 当前光标位置插入文本
    insertHtmlAtCaret: (html) => {
        let sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                let el = document.createElement("div");
                el.innerHTML = html;
                let frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    },
    // 保存光标位置
    saveRange: () => {
        let selection = window.getSelection ? window.getSelection() : document.selection;
        if (!selection.rangeCount) return;
        let range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
        window._range = range;
    },
    // 基于保存的光标插入内容
    insertContent(str) {
        let selection, range = window._range;
        if (!window.getSelection) {
            range.pasteHTML(str);
            range.collapse(false);
            range.select();
        } else {
            selection = window.getSelection ? window.getSelection() : document.selection;
            range.collapse(false);
            let hasR = range.createContextualFragment(str);
            let hasR_lastChild = hasR.lastChild;
            while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
                let e = hasR_lastChild;
                hasR_lastChild = hasR_lastChild.previousSibling;
                hasR.removeChild(e);
            }
            range.insertNode(hasR);
            if (hasR_lastChild) {
                range.setEndAfter(hasR_lastChild);
                range.setStartAfter(hasR_lastChild);
            }
            selection.removeAllRanges();
            selection.addRange(range);
        }  
    },

相关文章

  • 可编辑div问题总结(光标,显示等)

    背景:需要编写一个简单的文本输入框,要求可以添加超链接,并且超链接可以修改内容,超链接在文本框中只显示标题(类似在...

  • textarea高度自适应自动增高撑开

    方法一:div模拟textarea文本域实现高度自适应 div模拟textarea出现光标实现编辑功能,可添加此属...

  • 可编辑div的光标定位问题

    上次分享了全局input增加敏感词检测的功能,有人私信我:如何解决光标漂移问题?我们每次替换完文本,光标总是会飘到...

  • 光标显示控制

    前言: 遇到一个需求:需要在可编辑的div有了内容后点击后光标出现在div的内容后面,'科学查询'了很多方法,最后...

  • Visual Studio Code默认快捷键大全

    常用 基础编辑 导航 搜索和替换 多光标和选择 丰富的语言编辑 编辑器管理 文件管理 显示 调试 集成终端

  • VS Code

    全局 基本 多光标与选择 查找替换 进阶 导航 编辑器管理 文件管理 显示 调试

  • EditText光标不显示问题

    开发中界面上在多个EditText时遇到了,editText在内容为空时,光标不显示的问题,出现这个问题的解决办法...

  • vi vim中常用命令

    开启编辑模式i: 在光标处开始编辑I: 在光标所在的行首开始编辑a: 在光标所在的下一个字符开始编辑A: 在光标所...

  • vim光标移动

    编辑vim配置文件,vim/vimrc。vim编辑不同类型的文件,会显示不同的颜色 vim 光标移动 方向键 h ...

  • iOS UITextField光标/文字起始位置

    概述 iOSUITextField默认输入光标和显示内容等靠近左边框,有时项目需要调整输入光标/内容起始位置 方法...

网友评论

    本文标题:可编辑div问题总结(光标,显示等)

    本文链接:https://www.haomeiwen.com/subject/vulnohtx.html