Inserimento mathjax in div contentEditable

Sto cercando di inserire del codice mathjax in un div contentEditable, in questo modo:Inserimento mathjax in div contentEditable

<!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>

e il 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']); 

});

che rende OK, ma una volta inserito, l'elemento si blocca e l'ulteriore input non è possibile. Qualcuno può segnalare il problema qui.

fonte

2012-10-16 user997712

Nota dal futuro: cdn.mathjax.org si avvicina alla fine della sua vita, controlla https://www.mathjax.org/cdn-shutting-down/ per suggerimenti sulla migrazione. –

È necessario chiamare MathJax quando il contenuto cambia. Vedi questo violino: http://jsfiddle.net/rfq8po3a/ (nota, ho dovuto sfuggire allo < e allo > in html).

questo è stato ottenuto con un paio di cose:

1) Spostare la logica mathjax nella sua propria funzione, refreshMathJax che ripopolare il tag e il codice.

2) chiamare questa funzione quando si carica la pagina per la prima volta e nuovamente su Blur.

3) Cancella l'elemento modificabile su Messa a fuoco. Senza questo, l'elemento modificabile non può essere riutilizzato facilmente. È possibile modificare la funzione di callback di onFocus sostituendo invece l'HTML di contentEditable con il contenuto originale di LaTeX.

fonte

2015-04-15 20:27:04 goldins

Ho appena realizzato che si trattava di una domanda piuttosto vecchia; Spero che qualcuno trovi ancora utile la mia risposta! – goldins

Inserimento mathjax in div contentEditable

risposta

Problemi correlati