向ckeditor添加數學公式插件

Question

我目前正在製作一個測驗應用程序與軌道 在這個我的要求是有一個像ckeditor一樣的文本處理和數學方程式打字功能的富文本編輯器ckeditor gem很好，但如何添加數學公式插件。 一個例子做的工作.. thanx提前

Answer 1

更新（2017年4月12日）：

我已經使用了新的CDN更新的例子，因爲MathJax正在關閉他們的CDN。查看Peter的評論以瞭解更多細節。

從下載的數學公式插件CKEDITOR：

http://ckeditor.com/addon/mathjax

此外您還需要以下插件：

lineutils 
widget 

把所有的插件在

app/assets/javascripts/ckeditor/plugins/ 

編輯/創建以下文件

app/assets/javascripts/ckeditor/config.js 

這些是我使用的設置：

CKEDITOR.editorConfig = function(config) 
{ 
    // Define changes to default configuration here. For example: 
    // config.language = 'fr'; 
    // config.uiColor = '#AADC6E'; 
    config.extraPlugins = 'lineutils,mathjax,widget'; 

    // MathJax config 
    config.mathJaxLib = '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML'; 

    /* Filebrowser routes */ 
    // The location of an external file browser, that should be launched when "Browse Server" button is pressed. 
    config.filebrowserBrowseUrl = "/ckeditor/attachment_files"; 

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Flash dialog. 
    config.filebrowserFlashBrowseUrl = "/ckeditor/attachment_files"; 

    // The location of a script that handles file uploads in the Flash dialog. 
    config.filebrowserFlashUploadUrl = "/ckeditor/attachment_files"; 

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Link tab of Image dialog. 
    config.filebrowserImageBrowseLinkUrl = "/ckeditor/pictures"; 

    // The location of an external file browser, that should be launched when "Browse Server" button is pressed in the Image dialog. 
    config.filebrowserImageBrowseUrl = "/ckeditor/pictures"; 

    // The location of a script that handles file uploads in the Image dialog. 
    config.filebrowserImageUploadUrl = "/ckeditor/pictures"; 

    // The location of a script that handles file uploads. 
    config.filebrowserUploadUrl = "/ckeditor/attachment_files"; 

    config.allowedContent = true; 

    // Toolbar groups configuration. 
    config.toolbar = [ 
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source'] }, 
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, 
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, 
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar', 'Mathjax' ] }, 
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, 
    '/', 
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, 
    { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] } 
    ]; 
}; 

'Mathjax' 是打開的公式編輯器的按鈕。

我希望這會有所幫助。

Answer 2

嘗試使用Wiris（www.wiris.com）。我認爲它比ckeditor更強大。