Wkładanie mathjax do contenteditable div

Próbuję wstawić trochę kodu mathjax do contenteditable div tak:Wkładanie mathjax do 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>

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

});

co czyni OK, ale po włożeniu, element zamarza i dalsze wprowadzanie nie jest możliwe. Czy ktoś może wskazać problem tutaj.

Źródło

2012-10-16 user997712

Uwaga z przyszłości: cdn.mathjax.org zbliża się do końca życia, sprawdź https://www.mathjax.org/cdn-shutting-down/ pod kątem wskazówek dotyczących migracji. –

Musisz zadzwonić do MathJax, gdy zawartość się zmieni. Zobacz to skrzypce: http://jsfiddle.net/rfq8po3a/ (uwaga, musiałem uciec od < i > w html).

ten został osiągnięty za pomocą kilku rzeczy:

1) przenieść logikę mathjax do własnej funkcji, refreshMathJax który ponownie wypełnić tag i kod.

2) wywołać tę funkcję przy pierwszym ładowaniu strony i ponownie przy włączeniu.

3) Wyczyść edytowalny element onFocus. Bez tego elementu edytowalnego nie można łatwo ponownie wykorzystać. Możesz zmienić funkcję wywołania zwrotnego onFocus, aby zamiast tego zastąpić HTML contentEditable oryginalną zawartością LaTeX.

Źródło

2015-04-15 20:27:04 goldins

Po prostu zdałem sobie sprawę, że to dość stare pytanie; Mam nadzieję, że ktoś nadal uzna moją odpowiedź za przydatną! – goldins

Wkładanie mathjax do contenteditable div

Odpowiedz

Powiązane problemy