步骤一、引入ckeditor.js （注：本实例以ThinkPHP3.2框架为载体，不熟悉ThinkPHP的朋友请自行补习，ckeditor文件代码内容也请去ckeditor官网自行下载）
作为程序员话不多说直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>史亚运的主页</title>
<script src="__PUBLIC__/Plugin/ckeditor/ckeditor.js"></script>
</head>
步骤二、在<textarea>标签中加上名为ckeditor的类选择器来显示ckeditor富文本编辑器
<li>
<labe>留言：</labe>
<textarea id="TextAreal" class="form-control ckeditor" name="post-message" rows="5" cols="100">
</textarea>
<span style="color:red;">必选</span>
</li>
效果如下：
步骤三、获取富文本编辑器中的内容（以下javascript代码建议写在页面底部）
<script type="text/javascript">
var ckeditor = CKEDITOR.replace('TextAreal');//获取富文本对象，TextAreal为<textarea>属性id的值
function postMessage(){
var name = $("input[name='name']").val()?$("input[name='name']").val():'';
//var message = ckeditor.document.getBody().getText();//获取ckeditor富文本编辑器中所有的文本内容
var message = ckeditor.document.getBody().getHtml();//获取ckeditor富文本编辑器中的包含标签和文本的所有内容
if(!message){
return false;
}
$.ajax({
type:"POST",
url:"<{:U('Message/add')}>",
data:{"message":message,"name":name},
dataType:"json",
success:function(result){
if(result.res){
alert('留言成功');
$("textarea[name='post-message']").val('');
$("input[name='name']").val()?$("input[name='name']").val(''):'';
}else{
alert('留言失败');
}
}
});
}
</script>
至此ckeditor富文本编辑器已成功集成到项目页面中。