CKeditor数据回显问题（setData方法）

最近碰到一个需求，需要在管理后端编辑一个简单的文字说明，用于商城项目展示说明，根据系统之前的集成的ckeditor编辑器来设置改字段内容。至于ckeditor的简单实用，在这里简单介绍一下；
首先引入js:
在这里插入图片描述

<script src="/js/ckeditor/ckeditor.js"></script>

然后是初始化，
在这里插入图片描述

在这里插入图片描述
replace 第一个参数是界面中的一个textarea的id,然后customConfig配置可以根据自己的具体需求，去网上百度

 let projectIntroduceEditor = CKEDITOR.replace('projectIntroduce', {
        customConfig: '/js/ckeditor-config.js',
        height: 300,
    });

界面效果：
在这里插入图片描述

注意CKEDITOR.replace（）这个方法有返回值，后续的相关动作可以利用这个返回值操作。
然后调用保存方法的时候：
projectIntroduceEditor.getdata();
在这里插入图片描述
这里就有正常的编辑器中的内容了。
但是管理后台对数据内容肯定需要支持编辑功能，这个时候就需要用到CKEDITOR的回显方法：setData()了；
我根据编辑内容的id,查询到我需要回显的实体对象后，根据界面加载情况去回显里面的内容，

在这里插入图片描述
代码：

 window.onload = function () {
 		//这里需要调查询接口，获取project的对象
		let project = {};
		// 然后回显
		paymentRulesEditor.setData(currentProject.paymentRules);
      	projectIntroduceEditor.setData(currentProject.projectIntroduce);
 }

但是，不管我怎么设置值，界面总是回显失败（或者时有时无），根据这个情况，我大概认为可能是编辑器加载是异步的，（我没有去求证，猜的），所以在我设置值得时候，编辑器没有完全家在完成，所以回显失败了；
然后，换一个思维，jq判断某个组件是不是完全加载完成，加载完成再回显，百度一个方法

let paymentRulesTimer = setInterval(function () {
                        if ($("#projectIntroduce").length > 0) {
                            paymentRulesEditor.setData(currentProject.paymentRules);
                            clearInterval(paymentRulesTimer);
                            return;
                        }
                    }, 100);

通过一个定时器，去监控组件是不是加载完成，加载完成再设置回显，问题搞定
在这里插入图片描述

CKeditor数据回显问题（setData方法）

猜你喜欢