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

white spaces中的spans之间有html。这些空格实际上是body的子节点的文本节点，其contenteditable设置为true。因此，当您单击其中一个文本节点时，单击一个可信节点，从而获得一个光标。

动态添加spans时，会添加空格而不添加空格。创建了一个文本节点，但它是空的，因此您无法单击它。

解决此问题的一种简单方法是在新插入的text node到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/

MathJax公式之间的右光标位置

1 个答案: