使用 CKEditor編輯插件

時間 2019-11-17

標籤使用 ckeditor 編輯插件简体版

原文原文鏈接

1，安裝方法javascript

下載CKEditor插件，而後解壓到對應的文件中。建議解壓到JS文件夾下面的CKEditor這個文件夾下。下載地址 : http://down.chinaz.com/soft/25168.htmhtml

在須要使用可視化編輯插件時調用CKEditor.js文件。<script type="text/javascript" src="js/CKEditor/ckeditor.js"></script>，而後在當前頁面中的window.onload中添加如下語句 java

var txtMsg = document.getElementById("Msg");框架

var editor_1 = CKEDITOR.replace(txtMsg);測試

Msg所在ID代碼： <textarea id="Msg" name="Msgname" ></textarea> /* 在這裏限制寬度無效，必需要是這個元素上級或以上才能設置大小高、寬。可在JS中設置 */ui

JS獲取值得方法爲：獲取text值，editor.document.getBody().getText(); 獲取html， editor.document.getBody().getHtml();插件

JS賦值方法爲：editor.setData("<p>DDD</p>"); 測試成功htm

插件是自動適應框架的大小，只能經過外圍設置，不能直接在textarea設置，直接在JS中調用時能夠設置，代碼以下： blog

var editor_1 = CKEDITOR.replace(txtMsg, { skin: "kama", width:700px, height:300px } ); // 寬度700px，高 300pxip

參考代碼以下：

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。