Правильное положение курсора между формулами MathJax

У меня есть некоторые проблемы с вставкой формул MathJax. Я хочу, чтобы этот пользователь мог вставлять курсор между каждой формулой и поэтому может принимать формулу insert.Правильное положение курсора между формулами 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>

Теперь я не могу вставить cursor между формулой для новых элементов, но может для старых. Может ли кто-нибудь сказать мне, как это сделать?

источник

2015-08-14 Nikita Ermolenko

между 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/

источник

2015-08-15 18:55:54

Спасибо за ответ, но если я удалить пространство между формулами, то я не могу вставить курсор между ними в следующий раз. Как это исправить? –

Я на самом деле предлагаю вам добавить пробел между вашими новыми формулами. В вашем вопросе вы говорите, что это работает для старого элемента, но не нового. Причина в том, что это пробелы. Если это то, что вам нужно, добавьте пробел между вашими новыми и старыми формулами. –

Правильное положение курсора между формулами MathJax

ответ

Смежные вопросы