Ckeditor通过Ajax更新数据

  做编辑Get info的时候用ajax请求后端数据，然后赋值到超文本框上。一般分为两种，一种是同步，一种是异步。

异步情况下可以参考 https://my.oschina.net/u/3142419/blog/1621789 ，该1思路是异步拿到数据后，销毁组件，然后再次实例化组件。 思路2是用官方的方法，SetData后回调进行一个渲染，不过第2个我没有试验成功。

注意：

如果不是必须要用异步的话，其实可以把ajax改成同步就可以很简单的赋值给Ckeditor富文本框了。

如下是我的组件实例化，因为我需要用的东西比较多，所以设置的属性也稍微多上几个。

    // instance, using default configuration.
    var myeditor = CKEDITOR.replace('editor1', {
        format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;address;div',
        filebrowserImageUploadUrl: UploadEditor + '?token=' + token,
        removeDialogTabs: 'image:advanced;link:advanced',
        removePlugins:'elementspath,resize',
        codeSnippet_theme: 'zenburn',
        height:'300'
    });
    CKEDITOR.stylesSet.add('my_styles', [
        // Block-level styles.
        {name: 'Blue Title', element: 'h2', styles: {color: 'Blue'}},
        {name: 'Red Title', element: 'h3', styles: {color: 'Red'}},

        // Inline styles.
        {name: 'CSS Style', element: 'span', attributes: {'class': 'my_style'}},
        {name: 'Marker: Yellow', element: 'span', styles: {'background-color': 'Yellow'}}
    ]);
    CKEDITOR.config.stylesSet = 'my_styles';
    CKEDITOR.config.image_previewText = ' '

 

如下是我获取数据进行一个赋值，注意主要是这个  async: false,就是同步，这样就可以简单的使用 setData

//get info function
function getInfo(){
    $.ajax({
        url: apiOnlineCourseThemeGet,
        type: 'GET',
        async: false,
        data: {id:onlineCourseThemeId},
        success: function(json) {
            myeditor.setData(json.data.onlineCourseThemeDetails)

        }
    });
}