No.3 设置和获取CKEditor内容的方法
匿名 · 更新于 2026/8/28
我们接着上一节的内容继续谈谈使用js动态设置和获取CKEditor内容的方法
- 设置CKEditor内容的方法 CKEDITOR.instances.editor1.setData("<h1>这是我们要设置的CKEditor的html内容</h1>")
- 获取CKEditor内容的方法 CKEDITOR.instances.editor1.getData()
说明：其中加粗的editor1为我们设置的CKEditor实例对象，结合上一节《No.2 CKEditor下载及安装 》内容，完整实例代码如下：
-------------------------以下是xhtml代码区域---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置及获取CKEditor编辑器内容</title>
<!--导入ckeditor.js文件-->
<script type="text/javascript" src="/include/ckeditor/ckeditor.js"></script>
</head>
<body>
<!--创建ckeditor编辑器-->
<div id="editor1"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {});
//==============================设置编辑器的内容==========================================
CKEDITOR.instances.editor1.setData("<h1>这是我们要设置的CKEditor的内容</h1>");
//==============================获取编辑器的内容==========================================
alert(CKEDITOR.instances.editor1.getData());
</script>
</body>
</html>
-------------------------以上是xhtml代码区域---------------------------