这种情况仅发生在 Firefox 中。
重要提示：我正在保存插入符的位置rangy.saveSelection():
- 当点击内容可编辑div时
- on keyup
- 将外部 html 元素（作为节点）添加到内容可编辑 div 时
我需要通过多种方式不断保存位置，以便能够在单击时插入 html 元素（我有一些标签）。
当我单击 contentEditable div 并且该 div 为空（比方说，第一个焦点）时，除非开始输入，否则我看不到插入符号。如果插入符号在末尾，我也看不到它。
另一个奇怪的行为是我无法使用箭头在 contentEditable div 中的文本之间导航。
如果我删除（不断）保存插入符号位置（在输入、单击等时）的功能，插入符号将恢复正常（插入符号可见）。
当我开始保存插入符的位置时出现问题。显然我应该做某种重置或清除..但根据我的理解，这些似乎适得其反（因为根据我的理解，它们破坏了保存的插入符位置）。
内容可编辑div
<div class="input__boolean input__boolean--no-focus">
<div
@keydown.enter.prevent
@blur="addPlaceholder"
@keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
@input="updateBooleanInput($event); clearHtmlElem($event);"
@paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
我的方法/功能
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed = false;
},
addPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
}
},
clearPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = '';
}
},
updateBooleanInput($event){
this.typed = true;
this.inputLength($event);
},
saveCursorLocation($event){
if($event.which != 8){
if(this.saved_sel)
rangy.removeMarkers(this.saved_sel)
this.saved_sel = rangy.saveSelection();
}
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
},
insertNode: function(node){
var selection = rangy.getSelection();
var range = selection.getRangeAt(0);
range.insertNode(node);
range.setStartAfter(node);
range.setEndAfter(node);
selection.removeAllRanges();
selection.addRange(range);
},
addBooleanTag($event){
// return this.$refs.ChatInput.insertEmoji($event.img);
this.$refs.divInput.focus();
console.log(this.input_length);
if(this.typed == false & this.input_length == 0){
this.$refs.divInput.innerHTML = ''
var space = '';
this.typed = true
this.saveCursorLocation($event);
}
rangy.restoreSelection(this.saved_sel);
var node = document.createElement('img');
node.src = $event.img;
node.className = "boolean-button--img boolean-button--no-margin";
node.addEventListener('click', (event) => {
// event.currentTarget.node.setAttribute('contenteditable','false');
this.$refs.divInput.removeChild(node);
})
this.insertNode(node);
this.saveCursorLocation($event);
},
clearHtmlElem($event){
var i = 0;
var temp = $event.target.querySelectorAll("span, br");
if(temp.length > 0){
for(i = 0; i < temp.length; i++){
if(!temp[i].classList.contains('rangySelectionBoundary')){
if (temp[i].tagName == "br"){
temp[i].parentNode.removeChild(temp[i]);
} else {
temp[i].outerHTML = temp[i].innerHTML;
}
}
}
}
},
pasted($event){
$event.preventDefault();
var text = $event.clipboardData.getData('text/plain');
this.insert(document.createTextNode(text));
this.inputLength($event);
this.typed == true;
},
insert(node){
this.$refs.divInput.focus();
this.insertNode(node);
this.saveCursorLocation($event);
},
正如您在 saveCursorLocation() 中看到的，我试图解决您单击 contentEditable div 并且没有插入符号的情况 - 这会让用户感到困惑。
// if(this.input_length == 0 && this.typed == false){
// var div = this.$refs.divInput;
// var sel = rangy.getSelection();
// sel.collapse(div, 0);
// }
这是一个死胡同 - 很可能是因为我对 Rangy 以及我应该如何使用这些功能了解甚少。
Firefox 上的预期行为与实际结果
当我单击 contentEditable div 时，我希望出现插入符号（同时在后台保存我的位置）。打字时，我希望插入符号出现在最后输入的字符之后，同时在键盘上保存插入符号的位置。此外，我希望能够通过左/右箭头导航文本，并在执行此操作时看到插入符号。
所有这些都是由
v-on:click="..... saveCursorLocation($event);"
and
@keyup="saveCursorLocation($event);....."
如果有人认为这会有帮助，我可以在 Firefox 中记录内容可编辑 div 及其行为。
编辑：我设法隔离问题并将其重现到 JSFiddle -https://jsfiddle.net/Darkkz/6Landbj5/13.
要找什么？
- 在 Firefox 中打开小提琴链接，然后按蓝色按钮之一（SI、SAU、NU），然后查看输入，插入符号未显示。
- 点击输入，插入符号不显示
- 输入时，不显示插入符号。不过，如果您单击单词/内容之间的内容，则会显示插入符号
