做编辑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) } }); }