自定义工具栏菜单

src/config.js

@@ -61,7 +61,58 @@ export default {
     defaultFontSize:10,
     limitSheetNameLength:true,    //是否限制工作表名的长度
     defaultSheetNameMaxLength:31,  //默认工作表名称的最大长度
-    showtoolbarConfig:{}, //自定义工具栏
+    showtoolbarConfig:{ //自定义工具栏
+        a: {
+            tips: "保存",
+            icon: "luckysheet-iconfont-baocun",
+            on: {
+                click:(e)=>{alert("保存");},
+            },
+        },
+        b: {
+            tips: "预览",
+            icon: "luckysheet-iconfont-wubiankuang",
+            on: {
+                mousedown: (e)=>{alert("预览")},
+            },
+        },
+        undoRedo: true, //Undo redo
+        paintFormat: true, //Format brush
+        currencyFormat: true, //currency format
+        percentageFormat: true, //Percentage format
+        numberDecrease: true, //'Decrease the number of decimal places'
+        numberIncrease: true, //'Increase the number of decimal places
+        moreFormats: true, //'More Formats'
+        font: true, //'font'
+        fontSize: true, //'Font size'
+        bold: true, //'Bold (Ctrl+B)'
+        italic: true, //'Italic (Ctrl+I)'
+        strikethrough: true, //'Strikethrough (Alt+Shift+5)'
+        underline: true, // 'Underline (Alt+Shift+6)'
+        textColor: true, //'Text color'
+        fillColor: true, //'Cell color'
+        border: true, //'border'
+        mergeCell: true, //'Merge cells'
+        horizontalAlignMode: true, //'Horizontal alignment'
+        verticalAlignMode: true, //'Vertical alignment'
+        textWrapMode: true, //'Wrap mode'
+        textRotateMode: true, //'Text Rotation Mode'
+        image:true, // 'Insert picture'
+        link:true, // 'Insert link'
+        chart: true, //'chart' (the icon is hidden, but if the chart plugin is configured, you can still create a new chart by right click)
+        postil: true, //'comment'
+        pivotTable: true, //'PivotTable'
+        function: true, //'formula'
+        frozenMode: true, //'freeze mode'
+        sortAndFilter: true, //'Sort and filter'
+        conditionalFormat: true, //'Conditional Format'
+        dataVerification: true, // 'Data Verification'
+        splitColumn: true, //'Split column'
+        screenshot: true, //'screenshot'
+        findAndReplace: true, //'Find and Replace'
+        protection:true, // 'Worksheet protection'
+        print:true, // 'Print'
+    },
     showsheetbarConfig:{}, //自定义底部sheet页
     showstatisticBarConfig:{}, //自定义计数栏
     cellRightClickConfig:{}, //自定义单元格右键菜单

src/controllers/toolbar.js

@@ -5,6 +5,8 @@ import { getObjType, camel2split } from '../utils/util';
 
 // 默认的工具栏按钮
 export const defaultToolbar = [
+    '|',
+
     'undo',
     'redo',
     'paintFormat',
@@ -106,6 +108,20 @@ export function createToolbarHtml() {
     const fontarray = locale().fontarray;
     const defaultFmtArray = locale().defaultFmt;
     const htmlMap = {
+        userdefined: `<div class="luckysheet-toolbar-button luckysheet-inline-block disabled" data-tips=""
+        id="luckysheet-icon-userdefined" role="button" style="user-select: none;">
+            <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block"
+            style="user-select: none;">
+                <div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block"
+                style="user-select: none;">
+                    <div class="luckysheet-icon luckysheet-inline-block " style="user-select: none;">
+                        <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img luckysheet-icon-userdefined iconfont luckysheet-iconfont-"
+                        style="user-select: none;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`,
         undo: `<div class="luckysheet-toolbar-button luckysheet-inline-block disabled" data-tips="${toolbar.undo}"
         id="luckysheet-icon-undo" role="button" style="user-select: none;">
             <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block"
@@ -877,8 +893,17 @@ export function createToolbarHtml() {
         if(showtoolbarConfig.hasOwnProperty('undoRedo')){
             config.undo = config.redo = showtoolbarConfig.undoRedo;
         }
-        Object.assign(config, showtoolbarConfig);
+        let n = 0;
+        for(let key in showtoolbarConfig){
+            if(!toolbarIdMap[key] && typeof(showtoolbarConfig[key]) == "object"){
+                defaultToolbar.splice(n,0,key);
+                toolbarIdMap[key]="#luckysheet-icon-"+key;
+                n++;
+            }
+            config[key] = showtoolbarConfig[key];
+        }
     }
+    var eventscount = 0;
     for (let i = 0; i < defaultToolbar.length; i++) {
         let key = defaultToolbar[i];
         if (!config[key] && key !== '|') {
@@ -888,7 +913,7 @@ export function createToolbarHtml() {
             }
             continue;
         }
-        if (key === '|') {
+        if (key === '|' && i>0) {
             const nameKeys = defaultToolbar[i - 1]
             if(nameKeys !== '|') {
                 buttonHTML.push(
@@ -896,6 +921,24 @@ export function createToolbarHtml() {
                 );
             }
         } else {
+            if(typeof(config[key]) === "object") {
+                var events = "";
+                for(var eventname in config[key].on){
+                    const eventcallback = config[key].on[eventname];
+                    eventscount++;
+                    window["luckysheet_toolbar_event_"+eventscount] = ()=>{
+                        const event=window.event;
+                        (async()=>{})().then(()=>{eventcallback(event)});
+                    }
+                    events += ` on`+eventname+`="luckysheet_toolbar_event_`+eventscount+`()"`
+                }
+                buttonHTML.push(htmlMap["userdefined"]
+                        .replaceAll("userdefined", key)
+                        .replaceAll(`data-tips=""`, `data-tips="`+config[key].tips+`"`+events+``)
+                        .replaceAll(`luckysheet-iconfont-`, config[key].icon)
+                        );
+                
+            }
             buttonHTML.push(htmlMap[key]);
         }
     }