步骤一、引入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富文本编辑器已成功集成到项目页面中。
