CKEDITOR mathjax公式在jquery中未正确加载

Posted 2021-04-11

我试图在ckeditor中显示mathjax公式。如果页面重新加载，公式将在ckeditor中按比例加载，如果它是jquery函数调用ckeditor公式未正确加载。我想通过jquery函数正确加载mathjax公式。我使用ckeditor版本“4.4.6 DEV”

公式显示在ckeditor中，同时触发jquery将数据加载到ckeditor：

（x = {-b pm sqrt {b ^ 2-4ac} over 2a}）

代码是：

// To load data in ckeditor
$('#cke_editor1 iframe').contents().find('body').html(element.body);

//ckeditor code
$('#editor1').ckeditor(
    function(){
      editorReady = true;
      // global!
      // used to be an assumption in jquery.init.editor.js
      // callback means we can always tell for sure, this helps with jasmine tests
    },
    {
      skin: 'cgp',
      forcePasteAsPlainText: true,
      resize_enabled: true,
      height: 450,
      extraPlugins: 'embed,attachment,multimedia,cg_inputctrl,footnotes',
        //,mathjax
        // mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
        // mathJaxClass: 'equation',
      toolbarCanCollapse: false,
      magicline_everywhere: true,
      magicline_tabuList: ['data-tabu'],
      toolbar:[
            [ 'Italic',
                'NumberedList', 'BulletedList', 'Blockquote','Footnotes','Superscript', 'Subscript', 'Table', 'SpecialChar', 'Mathjax',
                'Link', 'Unlink',
                'simpleImage', 'flvPlayer', 'flvPlayerAudio', 'Attachment', 'oembed',
                'Copy', 'Paste', 'Find',
                'Undo', 'Redo',
                'Maximize']],
      keystrokes:
        [
          [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ],
          [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ],

          [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ],

          [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
          [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],
          [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ],

          [ CKEDITOR.CTRL + 76 /*L*/, 'link' ],

          [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],

          [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ],
          [ CKEDITOR.CTRL + 66 /*B*/, 'doNothing' ],
          [ CKEDITOR.CTRL + 85 /*U*/, 'doNothing' ]
        ],
      contentsCss: [ CKEDITOR.basePath + 'contents.css',
                     "<%= application_asset_path('cg_gui/annotations.css') %>"],

      filebrowserBrowseUrl: urlFor("/cg_ck_multimedia/attachments"),
      filebrowserSimpleImageBrowseLinkUrl: urlFor("/cg_ck_multimedia/images"),
      // video custom placeholder images also browsed here
      filebrowserSimpleImageBrowseUrl: urlFor("/cg_ck_multimedia/images"),
      filebrowserFlvPlayerBrowseUrl: urlFor("/cg_ck_multimedia/videos"),
      filebrowserFlvPlayerAudioBrowseUrl: urlFor("/cg_ck_multimedia/audios"),
      // ckeditor window widths should be >= 640wx420h or ckeditor will resize them
      filebrowserSimpleImageWindowWidth: 920,
      filebrowserSimpleImageWindowHeight: 535,
      filebrowserFlvPlayerWindowWidth: 920,
      filebrowserFlvPlayerWindowHeight: 535,
      filebrowserFlvPlayerAudioWindowWidth: 920,
      filebrowserFlvPlayerAudioWindowHeight: 535,
      filebrowserWindowWidth: 920,
      filebrowserWindowHeight: 535,
      filebrowserSimpleImageUploadUrl: urlFor("/cg_ck_multimedia/images"),
      filebrowserFlvPlayerUploadUrl: urlFor("/cg_ck_multimedia/videos"),
      filebrowserFlvPlayerAudioUploadUrl: urlFor("/cg_ck_multimedia/audios"),
      filebrowserUploadUrl: urlFor("/cg_ck_multimedia/attachments")

    });
    })();

答案

如果我理解正确，你想动态修改编辑器HTML，例如通过ajax调用并添加包含mathjax公式的内容。

您的代码的问题是您尝试使用jQuery手动修改编辑器HTML，因此它无法解析mathjax公式。您应该始终使用其功能修改编辑器内容。例如。您可以使用editor.setData函数来设置mathjax公式的内容：

editor.setData( '<p>A<span class="math-tex">\(1 + 1 = 2\)</span>B</p>' );

另外，不要忘记您必须使用span元素包装mathjax公式并更正可以使用CKEDITOR.config.mathjaxClass配置属性更改的类名。默认值为math-tex。