初始方式:
說明: 在快速入門中使用KE.show({ .. .})來初始化了一個編輯器,具體進入js/kindeditor.js下可以看到KE對象下的show方法先調用了KE的init方法然後又調用了其event事件對象的ready方法,內部其實是調用的KE的create方法,傳遞的參數爲args的id屬性,所以可通過2種方式來初始化編輯器
# 方式一 :
# 方式二 :
注意: 無論使用哪種方式初始化編輯器,都需要傳遞配置對象{ ... },配置對象中id屬性是必須配置的,其它的屬性默認採用默認配置,全部可以不配置.
配置方法:
說明: 上面2種方式初始化時候首先調用了kindeditor.js裏的KE對象的init方法,進入方法可以看到首先var g = KE.g[args.id] = args,KE.g[args.id],g和KE.g[args.id]全部指向了args對象,然後2219~2222行通過KE.each遍歷KE.setting對象的鍵值對如果args中沒有定義KE.setting中的鍵值對則默認使用KE.setting中定義的鍵值對作爲默認值,可以搜索下KE.setting看下相關的默認配置
擴展: 從上面可以看出要自定義配置參數第一種方式是通過在KE.show({...})的時候定義在傳遞的對象中,第二種方式是通過修改kindeditor.js中KE.setting對象相關配置.
配置參數:
KE.show({
// 說明: TextArea輸入框Id,必須設置,數據類型爲String
id : 'content1',
// 說明: 配置編輯器的工具欄,其中'-'表示換行符,'|'表示分割符,數據類型爲Array
items: [ 'source', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy',
'paste', 'plainpaste', 'wordpaste', 'justifyleft', 'justifycenter',
'justifyright', 'justifyfull', 'insertorderedlist',
'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'selectall', 'title', 'fontname', 'fontsize',
'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
'strikethrough', 'removeformat', 'p_w_picpath', 'flash', 'media',
'table', 'hr', 'emoticons', 'link', 'unlink', 'about'
],
// 說明: 設置編輯器的寬度,可以設置px或%,默認會比TextArea輸入框樣式表寬度優先
// 度高,數據類型爲String
width: '100%',
// 說明: 設置編輯器的高度,只能設置px,默認會比TextArea輸入框樣式表高度優先
// 度高,數據類型爲String
height: '300px',
// 說明: 設置編輯器最小寬度,只能設置px,數據類型爲Int
minWidth: 1168,
// 說明: 設置編輯器最小高度,只能設置px,數據類型爲Int
minHeight: 300,
// 說明: 設置在源碼模式下是否根據htmlTags過濾HTML代碼,當爲true時,在htmlTags
// 中的元素只保留指定的屬性,其它的被過濾掉,當爲false時則htmlTags不會啓任何作
// 用,數據類型爲Boolean
filterMode: false,
// 說明: 配合filterMode一起使用設置要保留標記和屬性,哈希數組的Key爲標籤名,
// value是要保留的屬性數組,.開始的屬性表示style屬性,數據類型爲Object
htmlTags: {
font : ['color', 'size', 'face', '.background-color'],
span : ['style'],
div : ['class', 'align', 'style'],
table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
a : ['class', 'href', 'target', 'name', 'style'],
embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
'style', 'align', 'allowscriptaccess', '/'],
img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
hr : ['class', '/'],
br : ['/'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['align', 'style'],
'tbody,tr,strong,b,sub,sup,em,i,u,strike' : []
},
// 說明: 設置拖動方式,2表示可以水平或豎直拖動,1表示只可豎直拖到,0表示禁止拖
// 動,數據類型爲Int
resizeMode: 1,
// 說明: 設置風格類型,主題文件位於js/kindeditor/skins下,數據類型爲String
skinType: 'tinymce',
// 說明: 設置是否默認爲可視化模式,true表示可視化模式,false表示代碼編輯模式,
// 數據類型爲Boolean
wyswygMode: true,
// 說明: 設置編輯器iframe document的CSS,用於設置可視化區域的樣式,用於設置可
// 視化區域的樣式,數據類型爲String或Array
cssPath : KE.scriptPath+'index.css',
// 說明: 設置默認皮膚的目錄,包含一些風格相關的css文件和gif圖片,默認位於js/
// kindeditor/skins下,默認值爲KE.scriptPath + 'skins/',數據類型爲String
skinsPath: KE.scriptPath+'skins/',
// 說明: 設置默認插件的目錄,默認位於js/kindeditor/plugin,數據類型爲String
pluginsPath: KE.scriptPath + 'plugins/',
// 說明: 設置文字輸入的最小變化長度,當到達此長度時纔會記錄到上一步undo和重複
// redo堆棧中(其實就是push到對應的數組),數據類型爲Int
minChangeSize: 1,
// 說明: 設置是否自動加載編輯器主題的CSS,默認爲g.skinsPath + g.skinType +
// '.css',數據類型爲Boolean
loadStyleMode: true,
// 說明: 設置站內本地URL,可設置空/relative/absolute/domain,空表示不修改URL,
// relative表示相對路徑,absolute表示絕對路徑,domain表示帶域名的絕對路徑,常用
// 於編輯器內資源文件引用的是其它路徑或地址,數據類型爲String
urlType: '',
// 說明: 設置換行符標籤,可設置br或p,默認爲br,數據類型爲String
newlineTag: 'br',
// 說明: 設置編輯器創建後執行的回調函數,作爲編輯器初始化之後的其它初始化,如
// 下e其實就是content1,而內部的this其實就是id爲content1編輯器對象,數據類型爲
// function
afterCreate: function(e){console.log(this);},
// 說明: 設置圖片上傳時是否顯示本地上傳,true表示顯示本地上傳,false表示不支持
// 數據類型爲Boolean
allowUpload: true,
// 說明: 設置圖片上傳時網絡上傳時是否可瀏覽遠程服務器圖片功能,true表示顯示,
// false表示不顯示,數據類型爲Boolean
allowFileManager: true,
// 說明: 設置referMethod後上傳圖片的POST參數裏有referMethod,數據類型爲String
referMethod: '',
// 說明: 設置彈出框的對齊類型,可設置爲page或空,page爲相對於頁面居中,空表示相
// 對於編輯器居中
dialogAlignType: 'page',
// 說明: 設置上傳圖片時服務端處理腳本,數據類型爲String
p_w_picpathUploadJson: KE.scriptPath + 'php/upload_json.php',
// 說明: 設置瀏覽遠程圖片服務端處理腳本,數據類型爲String
fileManagerJson: KE.scriptPath + 'php/file_manager_json.php'
});說明: 如上是kindeditor-3.4.2版本支持的所有選項,具體可手動修改index.js測試,高版本新增參數可參考http://kindeditor.net/doc3.php?cmd=config.