1. 程式人生 > >百度富文字自定義 命令

百度富文字自定義 命令

百度富文字雖然是一款功能強大的富文字編輯器,但是在工作中往往會遇到更多想象不到的問題,那麼就需要我們擴充套件百度富文字的功能,分享一下如何擴充套件百度富文字。

以做過的替換表頭為例:

首先,找到ueditor.all.js ,新增一下程式碼:此程式碼功能是 將table 表頭 <table    ...... > 替換為'<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">'

/**
 * 一鍵替換表頭
 * @command replacetable    
 * @method execCommand
 * @param { String } cmd 命令字串
 * @example
 */
UE.commands['replacetable'] = {
  execCommand: function (cmdName) {
    var me = this;
    var content = me.getContent();
    var reg = /<table("[^"]*"|'[^']*'|[^'">])*>/g;
    var tableTemp = '<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">';
    var replace = content.replace(reg, tableTemp);
    me.setContent(replace);
  }
};

第二步將 該命令新增到命令列工具中

找到 ueditor.config.js   ----》 toolbars  【//工具欄上的所有的功能按鈕和下拉框,可以在new編輯器的例項時選擇自己需要的重新定義】  ----》 將第一步定義好的命令名稱【replacetable】新增進去  

新增提示功能

/當滑鼠放在工具欄上時顯示的tooltip提示,留空支援自動多語言配置,否則以配置值為準
        labelMap:{
            'replacetable':'一鍵替換表頭'
        },
新功能圖示:百度富文字有預設的主題,如果新增加的功能不設定圖示則預設為第一個B加粗的圖示

可在 themes  ----> default- ----> css---->ueditor.css 增加更改圖示。【新增功能會有一個主類 edui-for-replacetable】以區別其他的功能按鈕