Xheditor/插件開發(fā)指南

標(biāo)準(zhǔn)插件開發(fā)流程：

1. 設(shè)計(jì)插件圖標(biāo)并在頁面中定義好CSS；
2. 定義插件參數(shù)并寫入初始化參數(shù)plugins；
3. 編寫插件調(diào)用時(shí)要執(zhí)行的代碼。

下面我們就demo09中的一個(gè)最簡(jiǎn)單插件作介紹：

    <style type="text/css">
    .testClassName {
        background:transparent url(img/plugin.gif) no-repeat 20px 20px;
        background-position:3px 3px;
    }
    </style>

    test7:{c:'testClassName',t:'測(cè)試7：showIframeModal (Ctrl+7)',s:'ctrl+7',e:function(){
                        var _this=this;
                        _this.saveBookmark();
                        _this.showIframeModal('測(cè)試showIframeModal接口','uploadgui.html',function(v){_this.loadBookmark();_this.pasteText('返回值：\r
    \n'+v);},500,300); 
                }}

這個(gè)插件實(shí)現(xiàn)的功能是打開一個(gè)iframe，并將iframe返回的參數(shù)字符串插入到當(dāng)前編輯器光標(biāo)處。

1. 其中test7為插件的name，用來在tools初始化參數(shù)中調(diào)用
2. c:'testClassName'為插件的樣式名稱
3. t:'測(cè)試7：showIframeModal (Ctrl+7)'是鼠標(biāo)放在按鈕上顯示的提示文字
4. s:'ctrl+7'是定義插件的快捷方式，在編輯器區(qū)域里按設(shè)置的快捷方式就會(huì)執(zhí)行此插件事件；
5. e:function(){}為插件點(diǎn)擊后要執(zhí)行的代碼

特別說明：

1. 插件執(zhí)行函數(shù)中可以用this.的方式調(diào)用所有的API接口函數(shù)。如果使用回調(diào)函數(shù)，請(qǐng)將this變量保存在臨時(shí)變量中，例如_this;
2. 在某些瀏覽器下，打開會(huì)轉(zhuǎn)移焦點(diǎn)的操作界面，會(huì)導(dǎo)致編輯區(qū)域焦點(diǎn)丟失。例如：showIframeModal，在showIframeModal之前要先執(zhí)行saveBookmark保存焦點(diǎn)，再在回調(diào)函數(shù)中執(zhí)行l(wèi)oadBookmark函數(shù)恢復(fù)焦點(diǎn)，之后才能調(diào)用pasteHTML等函數(shù);
3. 如果希望樣式表存儲(chǔ)在系統(tǒng)自帶的模板目錄ui.css中，請(qǐng)將插件對(duì)象樣式名留空，則會(huì)自動(dòng)按照插件名來調(diào)用相應(yīng)的樣式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名。

參考來源

• http://xheditor.com/manual/2#chapter2

Xheditor使用手冊(cè)導(dǎo)航
入門基礎(chǔ) 進(jìn)階使用： 進(jìn)階使用指導(dǎo)|初始化參數(shù)列表|API函數(shù)接口列表|上傳程序開發(fā)規(guī)范|插件開發(fā)指南|皮膚設(shè)計(jì)指南 其它相關(guān)