MathJax 公式之间的右光标位置

Question

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

我的代码：

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>

现在我无法在新元素的公式之间插入 cursor，但可以插入旧元素。谁能告诉我怎么做对吗？

Answer 1

你的html中的spans之间有white spaces。这些白色 space 实际上是 body 的子文本节点，contenteditable 设置为 true。因此，当您单击这些文本节点之一时，您会单击一个可编辑的节点，因此您会得到一个光标。

当您动态添加 spans 时，它添加时没有白色 space。创建了一个文本节点，但它是空的，因此您无法单击它。

解决此问题的一个简单方法是将新插入的 spans 之前的 text node 设置为 " "。然后它将具有与您的旧元素相同的行为。像这样：

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/

MathJax 公式之间的右光标位置

Right cursor position between MathJax formulas

html

javascript

mathjax