1, 安装方法
下载CKEditor插件,然后解压到对应的文件中。建议解压到JS文件夹下面的CKEditor这个文件夹下。下载地址 : http://down.chinaz.com/soft/25168.htm
在需要使用可视化编辑插件时调用CKEditor.js文件。<script type="text/javascript" src="js/CKEditor/ckeditor.js"></script>,然后在当前页面中的window.onload中添加以下语句
var txtMsg = document.getElementById("Msg");
var editor_1 = CKEDITOR.replace(txtMsg);
Msg所在ID代码 : <textarea id="Msg" name="Msgname" ></textarea> /* 在这里限制宽度无效,必须要是这个元素上级或以上才能设置大小高、宽。 可在JS中设置 */
JS获取值得方法为: 获取text值,editor.document.getBody().getText(); 获取html, editor.document.getBody().getHtml();
JS赋值方法为 :editor.setData("<p>DDD</p>"); 测试成功
插件是自动适应框架的大小,只能通过外围设置,不能直接在textarea设置,直接在JS中调用时可以设置,代码如下 :
var editor_1 = CKEDITOR.replace(txtMsg, { skin: "kama", 700px, height:300px } ); // 宽度700px,高 300px
参考代码如下 :
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo For Ckeditor</title> <script type="text/javascript" src="ckeditor_3.6/ckeditor.js"></script> </head> <body> <textarea id="Msg" name="Msg" width="200" height="200"></textarea> <input type="button" name="btn_Submit" id="btn_Submit" value="保存" onclick="save()" /> <script type="text/javascript"> var txtMsg = document.getElementById("Msg"); var editor_1 = CKEDITOR.replace(txtMsg, { skin: "kama", 700, height:300 } ); editor_1.setData("<p>测试数据</p>"); function save() { alert(editor_1.document.getBody().getHtml()); } </script> </body> </html>