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)

        }
    });
}
原文地址:https://www.cnblogs.com/ShenShanXueRen/p/14680070.html