2012-10-16 61 views
5

Tôi cố gắng để chèn một số mã MathJax vào một div contentEditable, như vậy:Chèn MathJax vào 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> 

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

}); 

nào làm cho OK, nhưng một khi điều này được chèn vào, phần tử bị đóng băng và đầu vào thêm là không thể. Ai đó có thể chỉ ra vấn đề ở đây.

+1

Lưu ý từ tương lai: cdn.mathjax.org sắp hết hạn, hãy kiểm tra https://www.mathjax.org/cdn-shutting-down/ để biết các mẹo di chuyển. –

Trả lời

1

Bạn cần gọi MathJax khi nội dung thay đổi. Xem fiddle này: http://jsfiddle.net/rfq8po3a/ (lưu ý, tôi đã phải thoát khỏi <> trong html).

này được thực hiện với một vài điều:

1) di chuyển logic MathJax vào chức năng riêng của mình, refreshMathJax mà sẽ tái cư thẻ và mã.

2) gọi hàm này khi tải trang lần đầu tiên và bật lại trênBlur.

3) Xóa phần tử có thể chỉnh sửa trênFocus. Không có điều này, không thể sử dụng lại phần tử có thể chỉnh sửa dễ dàng. Bạn có thể thay đổi hàm gọi lại onFocus để thay thế html contentEditable bằng nội dung LaTeX gốc.

+0

Tôi vừa nhận ra đây là một câu hỏi khá cũ; Tôi hy vọng một người nào đó vẫn thấy câu trả lời của tôi hữu ích! – goldins

Các vấn đề liên quan