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

最新推荐文章于 2024-07-21 12:42:01 发布

waterSpinach1217

最新推荐文章于 2024-07-21 12:42:01 发布

阅读量2.7k

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/pjw1217/article/details/112990335

版权

本文介绍了如何在后台管理系统中集成CKEDITOR编辑器进行内容编辑，并解决编辑器内容回显的问题。通过引入CKEDITOR.js，初始化编辑器并设置配置，然后在页面加载完成后使用CKEDITOR的getData()方法获取编辑内容，以及setData()方法实现内容回显。针对回显失败的情况，采用了定时器监控编辑器加载状态，待编辑器加载完成后再设置回显，成功解决了问题。

摘要由CSDN通过智能技术生成

最近碰到一个需求，需要在管理后端编辑一个简单的文字说明，用于商城项目展示说明，根据系统之前的集成的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);

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