2012-10-16 44 views
5

में मैं बहुत की तरह, एक contenteditable div में कुछ MathJax कोड डालने के लिए कोशिश कर रहा हूँ:डालने MathJax 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> 

और जे एस

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

}); 

कौन सा ठीक renders, लेकिन एक बार यह डालने के बाद, तत्व फ्रीज हो जाता है और आगे इनपुट संभव नहीं है। क्या कोई यहां समस्या को इंगित कर सकता है।

+1

भविष्य से नोट: cdn.mathjax.org अपने जीवन के अंत में है, माइग्रेशन युक्तियों के लिए https://www.mathjax.org/cdn-shutting-down/ देखें। –

उत्तर

1

सामग्री बदलते समय आपको MathJax को कॉल करने की आवश्यकता है। यह पहेली देखें: http://jsfiddle.net/rfq8po3a/ (ध्यान दें, मुझे < और > एचटीएमएल में भागना पड़ा)।

यह एक कुछ चीजों के साथ हासिल की थी:

1) अपनी ही समारोह, refreshMathJax जो टैग और कोड को फिर से पॉप्युलेट कर देगा में MathJax तर्क चलते हैं।

2) पृष्ठ को पहली बार लोड करते समय इस फ़ंक्शन को कॉल करें, और फिर ब्लर पर।

3) संपादन योग्य तत्व को फोकस पर साफ़ करें। इसके बिना, संपादन योग्य तत्व को आसानी से पुन: उपयोग नहीं किया जा सकता है। आप मूल LaTeX सामग्री के साथ सामग्री संपादन योग्य HTML को प्रतिस्थापित करने के लिए ऑनफोकस कॉलबैक फ़ंक्शन को बदल सकते हैं।

+0

मुझे अभी एहसास हुआ कि यह एक बहुत पुराना सवाल था; मुझे आशा है कि किसी को अभी भी मेरा जवाब उपयोगी लगेगा! – goldins