1. 程式人生 > 實用技巧 >富文字編輯器(umeditor設定草稿按鈕):

富文字編輯器(umeditor設定草稿按鈕):

Umeditor.min.js 在最後面新增(save)方法:

UM.registerUI('save', function( name ){

//該方法裡的this指向編輯器例項
        var me = this,
//例項化一個UMEDITOR提供的按鈕物件
            $button = $.eduibutton({
//按鈕icon的名字, 在這裡會生成一個“edui-icon-save”的className的icon box,
//使用者可以重寫該className的background樣式來更改icon的圖示
//覆蓋示例見btn.css
    'icon': 'save',
    
'title': me.options.lang === "zh-cn" ? "儲存" : "save", 'click': function(){ //在這裡處理按鈕的點選事件 //點選之後執行save命令 me.execCommand( name ); } }); //在這裡處理儲存按鈕的狀態反射 me.addListener( "selectionchange", function () { //檢查當前的編輯器狀態是否可以使用save命令 var state = this.queryCommandState( name );
//如果狀態表示是不可用的( queryCommandState()的返回值為-1 ), 則要禁用該按鈕 $button.edui().disabled( state == -1 ).active( state == 1 ); } ); //返回該按鈕物件後, 該按鈕將會被附加到工具欄上 return $button; }); //註冊一個名為“save”的外掛 UM.plugins['save'] = function () { UM.commands[ 'save' ] = { execCommand:
function (cmdName) { //在這裡實現具體的命令的行為 //當呼叫 editor.execCommand(“save”) 時, 該方法就會被呼叫 //儲存功能的實際程式碼由使用者自己實現 /*alert("觸發儲存功能");*/ um.setContent(UM.getEditor('addPowersToDocument').execCommand( "getlocaldata" )); }, queryCommandState: function (cmdName) { //這裡返回只能是 1, 0, -1 //1代表當前命令已經執行過了 //0代表當前命令未執行 //-1代表當前命令不可用 //在這裡總是返回0, 這樣做可以使儲存按鈕一直可點選 return 0; }, //宣告該外掛不支援“撤銷/儲存”功能, 這樣就不會觸發ctrl+z 和ctrl+y的記憶功能 notNeedUndo: 1 }; };

參考資料網站:http://www.hanliang.name/wp/648.html