gpt4 book ai didi

javascript - MathJax 公式之间的右光标位置

转载 作者:行者123 更新时间:2023-12-03 09:13:49 26 4
gpt4 key购买 nike

我在插入 MathJax 公式时遇到一些问题。我希望用户可以在每个公式之间插入光标,因此可以在它们之间插入公式。

我的代码:

function get(elem) 
{
currentFormul = elem;
var math = MathJax.Hub.getAllJax(elem)[0];
var input = document.getElementById("MathInput");
input.value = math.originalText;
}
function input()
{
sel = window.getSelection();
var range = sel.getRangeAt(0);
var input = document.getElementById("MathInput");
var span = document.createElement("span");
span.contentEditable="false";
span.addEventListener('click', function() { get(this); }, true);
span.innerHTML = "\\("+input.value+"\\)";
range.insertNode(span);
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
</script>
<body contenteditable="true" spellcheck="false">
<span contenteditable="false">
<button onclick="change()">Change!</button>
<input id="MathInput" size="60" />
<button onclick="input()">INPUT!</button>
<button onclick="someChanges()">FONT!</button>
</span>
<p>S</p>
<span onclick="get(this)" contentEditable="false">\(\color{red}{x=ax^2}\)</span>
<span onclick="get(this)" contentEditable="false">\(x=ax^2\)</span>
<span onclick="get(this)" contentEditable="false">\(x=ax^2\)</span>
</body>
</html>

现在我无法在新元素的公式之间插入光标,但可以为旧元素插入。有人能告诉我该怎么做吗?

最佳答案

html 中的 span 之间有空格。这些空格实际上是 body 子节点的文本节点,其中 contenteditable 设置为 true。因此,当您单击这些文本节点之一时,您将单击一个可内容编辑的节点,因此您会得到一个光标。

当您动态添加spans时,它会添加没有空格的内容。已创建一个文本节点,但它是空的,因此您无法单击它。

解决此问题的一种简单方法是将新插入的 spans 之前的文本节点设置为 ""。然后它将具有与旧元素相同的行为。像这样:

function input()
{
sel = window.getSelection();
var range = sel.getRangeAt(0);
var input = document.getElementById("MathInput");
var span = document.createElement("span");
span.contentEditable="false";
span.addEventListener('click', function() { get(this); }, true);
span.innerHTML = "\\("+input.value+"\\)";
range.insertNode(span);
span.previousSibling.textContent = " ";
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}

http://jsfiddle.net/ox20a7oj/

关于javascript - MathJax 公式之间的右光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32005466/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com