修复 contenteditable div 上的插入符号位置

Question

我有一个带有contenteditable="true"并resize: both的 div resize: both属性都通过 flexbox 居中文本

.edit-area {      
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(206, 206, 206, 0.5);
      border: 0.1rem solid gray;
      resize: both;
      overflow: hidden;
}

问题是当你聚焦 div 并且它是空的时，插入符号位置在左上角

只有当你输入 1 个字符时，插入符号才会跳到中心

我做了一些研究，找到了这样的答案：
在 contenteditable 中使用 flexbox 居中时的插入符号位置
在 contentEditable 元素中居中插入符

text-align:center on :empty选择器适用于水平居中，但对于垂直对齐问题仍然存在，修复line-height = initial height on :empty选择器在我的情况下不起作用，因为这个 div 可以调整大小，有没有使用 onFocus 事件或其他一些 css 技巧以编程方式在中心设置插入符号的方法？

在@Spectric 的帮助下，这里是我最终得到的解决方案：

const FILLCHARACTER = String.fromCharCode(8203);

node
  .on("input", textInputHandler)
  .on("keydown", textKeyDownHandler);

  const textInputHandler = () => {
    const nodeDOM = d3.select(textNode.current).node();
    if (nodeDOM.innerText.toString().length == 0) {
      nodeDOM.innerHTML = FILLCHARACTER;
    }
  };

  const textKeyDownHandler = (event) => {
    if (event.key == "Backspace") {
      const selectionText = window.getSelection().toString();
      const selectionLength = selectionText.length;
      const currentTextLength = textValue.current.length;
      if (
        selectionLength === currentTextLength ||
        (selectionLength === 1 &&
          (/\u200B/g.test(selectionText) ||
            selectionText.indexOf(FILLCHARACTER) !== -1))
      ) {
        d3.select(textNode.current).node().innerHTML = FILLCHARACTER;
      }
    }
  };

Answer 1

使用 JavaScript，当您检测到 contenteditable 为空时，您可以插入一个空格 ('   ')。 这会将插入符号位置推到中心。

 document.querySelector('.edit-area').addEventListener("input", function() { if (this.innerText.toString().length == 0) { this.innerHTML= ' '; } })

 .edit-area { display: flex; justify-content: center; align-items: center; background-color: rgba(206, 206, 206, 0.5); border: 0.1rem solid gray; resize: both; overflow: hidden; }

 <div class="edit-area" contenteditable> &nbsp; </div>