Question

这是小提琴链接的代码 link

在这个我点击的范围被附加到div中的内容但是我想要而不是将它附加到光标的特定位置。

[contenteditable] {
  border: 1px solid #000;
  margin: 0.4em 0;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield;
}
img {
  vertical-align: top;
  max-height: 1.4em;
  max-width: 1.4em;
}
.selectable-icons img {
  cursor: pointer;
}

span.label.highlight {
    background: #E1ECF4;
    border: 1px dotted #39739d;
}

<p>Just click on an icon to add it.</p>

<div class="custom-input">
  <div class="selectable-icons">
    <span class="label"> Ingredient1 </span> 
    <span class="label">INGREDIENT 2</span> 
      <span class="label">INGREDIENT 3</span>  
  </div>
  <div contenteditable="true">
    You can type here. Add an icon.
  </div>
</div>

window.getSelection

我尝试了这个link

中提出的解决方案

在提供的链接中，我使用的是一个按钮。当我点击跨度

@Override
public void enterStatement(@NotNull apexParser.StatementContext ctx) {
    System.out.println(this.thisClass + "." + this.thisMethod);
    if( ctx.IF() != null ) {
        // System.out.println(ctx.IF().getSourceInterval());

        for(int i = 0; i < ctx.parExpression().getChild(1).getChildCount(); i++) {
            if( ctx.parExpression().getChild(1).getChild(i).getChildCount() > 1 ) {
                for( int j = 0; j < ctx.parExpression().getChild(1).getChild(i).getChildCount(); j++ ) {
                    System.out.println(ctx.parExpression().getChild(1).getChild(i).getChild(j).getText());
                }
            } else {
                System.out.println(ctx.parExpression().getChild(1).getChild(i).getText());
            }
        }

        //TokenStream tokens = parser.getTokenStream();
        //System.out.println(tokens.getText(ctx.IF().getSourceInterval()));
        //System.out.println(parser.getTokenStream().getText(ctx));

        //System.out.println(ctx.IF().getText());
        //System.out.println(ctx.toStringTree(parser));
        //System.out.println(ctx.IF().getSymbol().getText());
    }
}

使用onClick事件返回span元素。焦点转移到那个范围

Answer 1

为了能够在光标位置插入元素，您需要在焦点丢失之前保存当前位置。然后单击，您需要在添加元素之前恢复该位置。我已更新您的JSFiddle here

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.insertNode(html);
            restoreSelection(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }

}

您可以在此处查看the full paste html method

我希望这会有所帮助。

如何单击内容可编辑div然后单击span保留焦点

1 个答案: