Angular 2.0和Mathjax工作不正常

我把mathjax的半工作版與角度2.0拼湊在一起，但它以我無法完全掌握的方式打破。我在下面添加了一個plunkr來清楚地說明情況。Angular 2.0和Mathjax工作不正常

在我的代碼（不是plunkr）這是我的相關HTML：

<textarea 
    #editorArea 
    ngDefaultControl 
    spellcheck="false" 
    class="editor" 
    [(ngModel)]='assignment.content.text' 
    (keyup)="updateResult()" 
    [ngStyle]="{'height' : formatDimension(editorDimensions.height), 'padding' : formatDimension(editorDimensions.padding)} 
"></textarea> 

<div class="result" #result>{{ editorArea.value }}</div>

，這是相關的更新功能從HTML觸發：

@ViewChild('result')  result  : ElementRef; 

updateResult() { 
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.result.nativeElement]); 
}

最後，這是我的mathJax配置：

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); 
</script>

http://plnkr.co/edit/lEJZZaxKUYxFGdLtWW7Z?p=preview

來源

2016-09-20 Pwnball

看起來這裏的主要問題是如何使用MathJax將<textarea>的內容重複渲染到頁面的單獨區域。這在Modifying Math on the Page documentation中的一個簡單案例中進行了介紹。

基本上，你有兩個選擇：

選項1 保持阿霍德所呈現的數學元素，然後使用Text功能有一個新的數學串重新渲染（注：這需要整個textarea的是一個大的數學字符串，穿插數學串不正常文本）Plunker：

HTML：

<div id="result">$ $ 

你好-mathjax.ts（部分）：

ngOnInit() { 
    var self = this; 

    // callback function saves the rendered element, so it can 
    // be re-rendered on update with the "Text" function. 

    MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"], 
    function() {self.resultElement = MathJax.Hub.getAllJax("result")[0]; 
     self.updateResult(); 
     } 
); 

} 

updateResult() { 
    // re-render the same element with the value from the textarea 
    MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]); 
}   
updateResult() { 
    MathJax.Hub.Queue(["Text",this.resultElement,this.inputValue]); 
}

選項2 消滅renderd DIV每次和完全重新呈現textarea的內容。（這是爲了去，如果textarea的將包含mathstrings和常規文本的混合方式）Plunker：

HTML：

<div id="result"></div> 

HELLO-mathjax.ts（部分）：

ngOnInit() { 
    var self = this; 
    MathJax.Hub.Queue(
    ["Typeset",MathJax.Hub,"result"], 
    function() { 
     self.updateResult(); 
     } 
); 
} 

updateResult() { 
    var resultDiv = document.getElementById("result"); 
    // Replace the rendered content entirely 
    // with the bare text from the textarea. 
    resultDiv.innerHTML = this.inputValue; 
    // Rerender the entire resultDiv 
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"result"]); 
}

這plunker演示rendering a <textarea> that contains a mix of non-math and math statements (e.g. test test $\frac 12$)

這plunker演示rendering a <textarea> that should be interpreted entirely as math statements (e.g. \frac {11}2)

來源

2016-11-09 18:47:06

Angular 2.0和Mathjax工作不正常

回答

相關問題