Einfügen Mathjax in contentEditable div

Ich versuche, einige Mathjax Code in ein contentEditable div einzufügen, etwa so:Einfügen Mathjax in contentEditable div

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">  </script> 

</head> 
<body> 
    <div id="editor" contentEditable="true" style="width:400px;height:400px;"> 
</div>

und die JS

$(document).ready(function() { 

    $('#editor').focus(); 

    var code = "\\alpha"; 

    var html = '<span id="_math"><script type="math/tex;mode=in-line">'+ code +'</script></span>'; 

    document.execCommand('insertHTML', false, html); 

    MathJax.Hub.Queue(["Typeset", MathJax.Hub, '_math']); 

});

Welche OK macht, aber sobald dies eingefügt ist, friert das Element ein und eine weitere Eingabe ist nicht möglich. Kann hier jemand auf das Problem hinweisen?

Quelle

2012-10-16 user997712

Hinweis aus der Zukunft: cdn.mathjax.org nähert sich dem Ende seines Lebens. Überprüfen Sie https://www.mathjax.org/cdn-shutting-down/, um Tipps zur Migration zu erhalten. –

Sie müssen MathJax aufrufen, wenn sich der Inhalt ändert. Siehe diese Geige: http://jsfiddle.net/rfq8po3a/ (Hinweis, ich musste die < und > in HTML zu entkommen).

Dies wurde mit ein paar Dinge erreicht:

1) die Mathjax Logik in seine eigene Funktion bewegen, refreshMathJax, die den Tag-und-Code erneut bevölkern werden.

2) rufen Sie diese Funktion beim ersten Laden der Seite auf und erneut onBlur.

3) Löschen Sie das editierbare Element onFocus. Ohne dies kann das bearbeitbare Element nicht einfach wiederverwendet werden. Sie können die onFocus-Callback-Funktion ändern, um stattdessen den contentEditable-HTML durch den ursprünglichen LaTeX-Inhalt zu ersetzen.

Quelle

2015-04-15 20:27:04 goldins

Ich habe gerade festgestellt, dass dies eine ziemlich alte Frage war; Ich hoffe jemand findet meine Antwort immer noch nützlich! – goldins

Einfügen Mathjax in contentEditable div

Antwort

Verwandte Themen