使用 CKEditor编辑插件

时间：2022-11-16 15:01:14

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", width: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", width:700, height:300 } );

            editor_1.setData("<p>测试数据</p>");

            function save() {

                alert(editor_1.document.getBody().getHtml());

            }

        </script>

    </body>

</html>

　　

相关文章