如何将文本光标放在HTML元素之后？

我和contentEditable = true有个div。在div内部有文本节点和一些反应(超文本标记语言)节点。简单设置的代码如下所示：

import React from "react";
import ReactDOM from "react-dom";
import { Tag } from "antd";
import 'antd/dist/antd.css';
import "./styles.css";

function App() {
return (
    <div contentEditable={true} class="test-div">

     <Tag closable contentEditable={false} className="tag">
        Tag1
     </Tag>

     some-text

     <Tag closable contentEditable={false} className="tag">
        Tag2
     </Tag>

     some-text

     <Tag closable contentEditable={false} className="tag">
        Tag3
     </Tag>

    </div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这也是一个有用的工具：https://codesandbox.io/s/93kjq4o88r

输出类似于：

如您所见，尽管tag不可编辑，但光标位于标记的顶端。

我尝试了多种方法，包括：

.tag {
    cursor: none;
    caret-color: transparent;
}

但不是我想要的方式。我不希望光标位于tag内部。我怎么能这样做呢？

转载请注明出处:http://www.jubohx.com/article/20230512/1438880.html