CKEDITOR mathjax формула не загружается должным образом в JQuery

Question

Я пытаюсь отобразить формулу mathjax в ckeditor. Если страница перезагружается, формула загружается в ckeditor по-своему, если вызов функции jquery ckeditor не загружается должным образом. Я хочу загрузить формулу mathjax правильно через функцию jquery. Я использую 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")

    });
    })();

Answer 1

Если я вас правильно понимаю, вы хотите динамически изменять редактор HTML, например. по вызову ajax и добавьте содержимое, содержащее формулу mathjax.

Проблема с вашим кодом заключается в том, что вы пытаетесь вручную изменить редактор HTML с помощью jQuery, поэтому он не сможет проанализировать формулу mathjax. Вы всегда должны изменять содержимое редактора, используя его функции. Например. Вы можете использовать функцию editor.setData для установки содержимого по формуле mathjax:

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

Кроме того, не забывайте, что вы должны обернуть формулу mathjax элементом span и правильным именем класса, которое можно изменить с помощью свойства конфигурации CKEDITOR.config.mathjaxClass. По умолчанию это math-tex.