1.首先从CKEditor官方网站上下载CKEditor的最新版本。
2.将下载好的问价解压,把ckeditor.js放到自己的项目下
3.引用
<head>
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
</head>
4.创建一个文本区域
<textarea id="aa"></textarea>
5.js代码说明
<script type="text/javascript">
CKEDITOR.replace( 'aa' );
</script>
//上面的脚本块只能包含在网页的<textarea>标签之后。也可以在<head>标签内运行这个替换过程,但是在这种情况下,你必须确定DOM已经载入完毕,通常可以写在window.onload事件里面(这时DOM肯定已经载入完毕啦)
<script type="text/javascript">
window.onload = function(){
CKEDITOR.replace( 'aa' );
};
</script>
//客户端数据处理 一些用应中(如ajax应用)需要在客户端处理完所有的数据,然后用它自己的方式向服务器发送数据,在这些情况下,使用CKEditor API就足以轻松获取编辑器实例中的内容。
<script type="text/javascript">
var aadata= CKEDITOR.instances.aa.getData();
</script>
6.实例
<form id="editform" method="post" encType="multipart/form-data">
<table>
<tr>
<td style="width: 100px" align="left">文章内容:</td>
<td align="left" colspan="5">
<textarea id="content" name="content" style="width: 450px" rows="9"></textarea>
</td>
</tr>
<tr>
<td>
<a href="#" onclick="save();" id="btn_zc">发布</a>
</td>
</tr>
</table>
</form>
<script>
CKEDITOR.replace("content");
function save(){
var value = CKEDITOR.instances.content.getData();
$("#content").val(value);
var theIndex=layer.msg( "保存中...", {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,time:100000}) ;
$.ajax({
url: "提交的接口",
type: 'POST',
cache: false,
data: new FormData($('#editform')[0]),
processData: false,
contentType: false
}).done(function(res) {
alert("成功!");
location.href="成功后需要跳转的页面";
}).fail(function(res) {alert("失败")}).always(function() {layer.close(theIndex);});
}
</script>
//保存到数据库的数据将是待着html标签的样式数据,返回数据时如下:
<script>
$.post("获取数据的接口",{},function(resp){
if(resp.msg=="OK"){
var data=resp.rows;
$("#content").val(data.content);
CKEDITOR.replace("content");
}
}
</script>