在線HTML編輯器KindEditor

 

 簡介

　　KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫，可以無縫的於Java、.NET、PHP、ASP等程序接合。

示例　

$(function() {
        KindEditor.ready(function(K) {
                editor1 = K.create('textarea[name="menuContent"]', {
                    allowFileManager : true,//true時顯示瀏覽遠程服務器按鈕
                    allowPreviewEmoticons : false,
                    wellFormatMode:false,
                    wellFormatMode:false,
                    width:650,
                    height:350,
                    allowImageUpload : true,
                    items:["source", "preview","template","cut","copy","paste",
                    "plainpaste","wordpaste","justifyleft","justifycenter",
                    "justifyright","justifyfull","insertorderedlist","insertunorderedlist",
                    "indent","outdent","subscript","superscript","quickformat",
                    "formatblock","fontname","fontsize","forecolor","hilitecolor",
                    "bold","italic","underline","strikethrough","lineheight","removeformat",
                    "table","hr","link","unlink","image","fontsize"],
                    afterCreate : function() {
                    },afterBlur: function(){
                        this.sync();
                    }
                });
        });

參數說明

　　width

　　編輯器的寬度，可以設置px或%，比textarea輸入框樣式表寬度優先度高。　　

• 數據類型: String
• 默認值: textarea輸入框的寬度

　　height　　

　　編輯器的高度，只能設置px，比textarea輸入框樣式表高度優先度高。

• 數據類型: String
• 默認值: textarea輸入框的高度

　　minWidth

　　指定編輯器最小寬度，單位為px。

 

• 數據類型: Int
• 默認值: 650

　　minHeight

　　指定編輯器最小高度，單位為px。

• 數據類型: Int
• 默認值: 100

　　items

　　配置編輯器的工具欄，其中”/”表示換行，”|”表示分隔符。

• 數據類型: Array
• 默認值:

[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
]

source	HTML代碼
preview	預覽
undo	后退
redo	前進
cut	剪切
copy	復制
paste	粘貼
plainpaste	粘貼為無格式文本
wordpaste	從Word粘貼
selectall	全選
justifyleft	左對齊
justifycenter	居中
justifyright	右對齊
justifyfull	兩端對齊
insertorderedlist	編號
insertunorderedlist	項目符號
indent	增加縮進
outdent	減少縮進
subscript	下標
superscript	上標
formatblock	段落
fontname	字體
fontsize	文字大小
forecolor	文字顏色
hilitecolor	文字背景
bold	粗體
italic	斜體
underline	下划線
strikethrough	刪除線
removeformat	刪除格式
image	圖片
flash	Flash
media	視音頻
table	表格
hr	插入橫線
emoticons	插入表情
link	超級鏈接
unlink	取消超級鏈接
fullscreen	全屏顯示
about	關於
print	打印
code	插入程序代碼
map	Google地圖
baidumap	百度地圖
lineheight	行距
clearhtml	清理HTML代碼
pagebreak	插入分頁符
quickformat	一鍵排版
insertfile	插入文件
template	插入模板
anchor	插入錨點

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　noDisableItems

　　designMode 為false時，要保留的工具欄圖標。

• 數據類型: Array
• 默認值: [‘source’, ‘fullscreen’]

　filterMode

　　true時根據 htmlTags 過濾HTML代碼，false時允許輸入任何代碼。

• 數據類型: Boolean
• 默認值: true

Note

4.1.1版本開始默認值為true。

 　htmlTags

　　指定要保留的HTML標記和屬性。Object的key為HTML標簽名，value為HTML屬性數組，”.”開始的屬性表示style屬性。

• 數據類型: Object
• 默認值:

{
        font : ['color', 'size', 'face', '.background-color'],
        span : [
                '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
        ],
        div : [
                'align', '.border', '.margin', '.padding', '.text-align', '.color',
                '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
                '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
        ],
        table: [
                'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
                '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
                '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
                '.width', '.height', '.border-collapse'
        ],
        'td,th': [
                'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
                '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
                '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
        ],
        a : ['href', 'target', 'name'],
        embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
        img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
        'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
                'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
                '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
        ],
        pre : ['class'],
        hr : ['class', '.page-break-after'],
        'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
}

　wellFormatMode

　　true時美化HTML數據。

• 數據類型: Boolean
• 默認值: true

　resizeType

　　2或1或0，2時可以拖動改變寬度和高度，1時只能改變高度，0時不能拖動。

• 數據類型: Int
• 默認值: 2

　themeType

　　指定主題風格，可設置”default”、”simple”，指定simple時需要引入simple.css。

• 數據類型: String
• 默認值: “default”

　　示例:

<link rel="stylesheet" href="../themes/default/default.css" />
<link rel="stylesheet" href="../themes/simple/simple.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh-CN.js"></script>
<script>
        var editor;
        KindEditor.ready(function(K) {
                editor = K.create('#editor_id', {
                        themeType : 'simple'
                });
        });
</script>

langType

指定語言，可設置”en”、”zh-CN”，需要引入lang/[langType].js。

• 數據類型: String
• 默認值: “zh-CN”

示例:

<link rel="stylesheet" href="../themes/default/default.css" /> <script charset="utf-8" src="../kindeditor.js"></script> <script charset="utf-8" src="../lang/en.js"></script> <script> var editor; KindEditor.ready(function(K) { editor = K.create('#editor_id', { langType : 'en' }); }); </script> 

designMode

可視化模式或代碼模式

• 數據類型: Boolean
• 默認值: true

fullscreenMode

true時加載編輯器后變成全屏模式。

• 數據類型: Boolean
• 默認值: false

basePath

指定編輯器的根目錄路徑。

• 數據類型: String
• 默認值: 根據kindeditor.js文件名自動獲取

themesPath

指定編輯器的themes目錄路徑。

• 數據類型: String
• 默認值: basePath + ‘themes/’

pluginsPath

指定編輯器的plugins目錄路徑。

• 數據類型: String
• 默認值: basePath + ‘plugins/’

langPath

指定編輯器的lang目錄路徑。

• 數據類型: String
• 默認值: basePath + ‘lang/’

minChangeSize

undo/redo文字輸入最小變化長度，當輸入的文字變化小於這個長度時不會添加到undo記錄里。

• 數據類型: String
• 默認值: 5

urlType

改變站內本地URL，可設置”“、”relative”、”absolute”、”domain”。空為不修改URL，relative為相對路徑，absolute為絕對路徑，domain為帶域名的絕對路徑。

• 數據類型: String
• 默認值: “”

newlineTag

設置回車換行標簽，可設置”p”、”br”。

• 數據類型: String
• 默認值: “p”

pasteType

設置粘貼類型，0:禁止粘貼, 1:純文本粘貼, 2:HTML粘貼

• 數據類型: Int
• 默認值: 2

dialogAlignType

設置彈出框(dialog)的對齊類型，可設置”“、”page”，指定page時按當前頁面居中，指定空時按編輯器居中。

• 數據類型: String
• 默認值: “page”

shadowMode

true時彈出層(dialog)顯示陰影。

• 數據類型: Boolean
• 默認值: true

zIndex

指定彈出層的基准z-index。

• 數據類型: Int
• 默認值: 811213

useContextmenu

true時使用右鍵菜單，false時屏蔽右鍵菜單。

• 數據類型: Boolean
• 默認值: true

syncType

同步數據的方式，可設置”“、”form”，值為form時提交form時自動同步，空時不會自動同步。

• 數據類型: String
• 默認值: “form”

indentChar

wellFormatMode 為true時，HTML代碼縮進字符。

• 數據類型: String
• 默認值: “\t”

cssPath

指定編輯器iframe document的CSS文件，用於設置可視化區域的樣式。

• 數據類型: String或Array
• 默認值: 空

cssData

指定編輯器iframe document的CSS數據，用於設置可視化區域的樣式。

• 數據類型: String
• 默認值: 空

bodyClass

指定編輯器iframe document body的className。

• 數據類型: String
• 默認值: “ke-content”

colorTable

指定取色器里的顏色。

• 數據類型: Array
• 默認值:

[
        ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'], ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'], ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'], ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000'] ] 

afterCreate

設置編輯器創建后執行的回調函數。

• 數據類型: Function
• 默認值: 無

afterChange

編輯器內容發生變化后執行的回調函數。

• 數據類型: Function
• 默認值: 無

afterTab

按下TAB鍵后執行的的回調函數。

• 數據類型: Function
• 默認值: 插入4個空格的函數

afterFocus

編輯器聚焦(focus)時執行的回調函數。

• 數據類型: Function
• 默認值: 無

afterBlur

編輯器失去焦點(blur)時執行的回調函數。

• 數據類型: Function
• 默認值: 無

afterUpload

上傳文件后執行的回調函數。

• 數據類型: Function
• 默認值: 無

KindEditor.ready(function(K) { K.create('#id', { afterUpload : function(url) { alert(url); } }); }); 

uploadJson

指定上傳文件的服務器端程序。

• 數據類型: String
• 默認值: basePath + ‘php/upload_json.php’

fileManagerJson

指定瀏覽遠程圖片的服務器端程序。

• 數據類型: String
• 默認值: basePath + ‘php/file_manager_json.php’

allowPreviewEmoticons

true時鼠標放在表情上可以預覽表情。

• 數據類型: Boolean
• 默認值: true

allowImageUpload

true時顯示圖片上傳按鈕。

• 數據類型: Boolean
• 默認值: true

allowFlashUpload

true時顯示Flash上傳按鈕。

• 數據類型: Boolean
• 默認值: true

allowMediaUpload

true時顯示視音頻上傳按鈕。

• 數據類型: Boolean
• 默認值: true

allowFileUpload

true時顯示文件上傳按鈕。

• 數據類型: Boolean
• 默認值: true

Note

4.0.6版本開始支持。

allowFileManager

true時顯示瀏覽遠程服務器按鈕。

• 數據類型: Boolean
• 默認值: false

fontSizeTable

指定文字大小。

• 數據類型: Array
• 默認值:

['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'] 

imageTabIndex

圖片彈出層的默認顯示標簽索引。

• 數據類型: Int
• 默認值: 0

Note

4.0.6版本開始支持。

formatUploadUrl

false時不會自動格式化上傳后的URL。

• 數據類型: Boolean
• 默認值: true

Note

4.1版本開始支持。

fullscreenShortcut

false時禁用ESC全屏快捷鍵。

• 數據類型: Boolean
• 默認值: false

Note

4.1版本開始支持，從4.1.2版本開始默認值為false。

extraFileUploadParams

上傳圖片、Flash、視音頻、文件時，支持添加別的參數一並傳到服務器。

• 數據類型: Array
• 默認值: {}

KindEditor.ready(function(K) { K.create('#id', { extraFileUploadParams : { item_id : 1000, category_id : 1 } }); }); 

Note

4.1.1版本開始支持。

filePostName

指定上傳文件form名稱。

• 數據類型: String
• 默認值: imgFile

Note

4.1.2版本開始支持。

fillDescAfterUploadImage

true時圖片上傳成功后切換到圖片編輯標簽，false時插入圖片后關閉彈出框。

• 數據類型: Boolean
• 默認值: false

Note

4.1.2版本開始支持。

afterSelectFile

從圖片空間選擇文件后執行的回調函數。

• 數據類型: Function
• 默認值: 無

Note

4.1.2版本開始支持。

pagebreakHtml

可指定分頁符HTML。

• 數據類型: String
• 默認值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />

Note

4.1.3版本開始支持。

allowImageRemote

true時顯示網絡圖片標簽，false時不顯示。

• 數據類型: Boolean
• 默認值: true

Note

4.1.6版本開始支持。

autoHeightMode

值為true，並引入autoheight.js插件時自動調整高度。

• 數據類型: Boolean
• 默認值: false

Note

4.1.8版本開始支持。

fixToolBar

值為true，並引入fixtoolbar.js插件時固定工具欄位置。

• 數據類型: Boolean
• 默認值: false

 

參考鏈接：http://kindeditor.net/docs/option.html