From 831f958e91dca5f4cc894eb6071d8e31b43fe80a Mon Sep 17 00:00:00 2001 From: cdswyda Date: Tue, 20 Apr 2021 16:23:13 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feature:=20=E9=87=8D=E6=9E=84=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=E9=85=8D=E7=BD=AE=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 558 支持以数组的形式直接配置工具栏按钮的显示隐藏和位置信息 --- docs/zh/guide/config.md | 32 +- src/controllers/constant.js | 758 +----------------------------- src/controllers/resize.js | 246 ++++------ src/controllers/toolbar.js | 911 ++++++++++++++++++++++++++++++++++++ 4 files changed, 1039 insertions(+), 908 deletions(-) create mode 100644 src/controllers/toolbar.js diff --git a/docs/zh/guide/config.md b/docs/zh/guide/config.md index d48cbed..f5d6816 100644 --- a/docs/zh/guide/config.md +++ b/docs/zh/guide/config.md @@ -275,7 +275,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 - 类型：Object - 默认值：{} - 作用：自定义配置工具栏，可以与showtoolbar配合使用，`showtoolbarConfig`拥有更高的优先级。 -- 格式： +- 格式1： ```json { undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏 @@ -316,7 +316,7 @@ Luckysheet开放了更细致的自定义配置选项，分别有 print:false, // '打印' } ``` -- 示例： +- 示例1： - 仅显示撤消重做和字体按钮： ```js @@ -341,7 +341,33 @@ Luckysheet开放了更细致的自定义配置选项，分别有 } } ``` - +- 格式2： + 对象格式可以很方便控制显示隐藏，使用数组形式可轻松控制按钮顺序和位置， 以下为工具栏按钮和分隔符的默认配置。 + ```json + [ + "undo", "redo", "paintFormat", "|", + "currencyFormat", "percentageFormat", "numberDecrease", "numberIncrease", "moreFormats", "|", + "font", "|", + "fontSize", "|", + "bold", "italic", "strikethrough", "underline", "textColor", "|", + "fillColor", "border", "mergeCell", "|", + "horizontalAlignMode", "verticalAlignMode", "textWrapMode", "textRotateMode", "|", + "image", "link", "chart", "postil", "pivotTable", "|", + "function", "frozenMode", "sortAndFilter", "conditionalFormat", "dataVerification", "splitColumn", "screenshot", "findAndReplace", "protection", "print" + ] + ``` +- 示例2： + - 自定义按钮和位置， 保护放到最前面， 只要字体样式相关按钮。 + ```json + { + "showtoolbarConfig": [ + "protection", "|", + "font", "|", + "fontSize", "|", + "bold", "italic", "strikethrough", "underline", "textColor" + ] + } + ``` ------------ ### showinfobar - 类型：Boolean diff --git a/src/controllers/constant.js b/src/controllers/constant.js index d442808..0344cb4 100644 --- a/src/controllers/constant.js +++ b/src/controllers/constant.js @@ -2,6 +2,7 @@ import locale from '../locale/locale'; import Store from '../store'; import luckysheetConfigsetting from './luckysheetConfigsetting'; import { getObjType } from '../utils/util'; +import { createToolbarHtml } from './toolbar'; //dom variable const gridHTML = function(){ const _locale = locale(); @@ -823,760 +824,9 @@ const luckysheetchartpointconfigHTML = ''; // toolbar -function menuToolBar (){ - const toolbar = locale().toolbar; - const fontarray = locale().fontarray; - const defaultFmtArray = locale().defaultFmt; - - // - return `
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- ${defaultFmtArray[0].text} -
-
-
-
-
-
-
-
-
-
-
-
- ${fontarray[0]} -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
- ${toolbar.sum} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-
- `; -} - +function menuToolBar() { + return createToolbarHtml(); +} function customLoadingConfig() { const _locale = locale(); diff --git a/src/controllers/resize.js b/src/controllers/resize.js index fe5893c..8f61f21 100644 --- a/src/controllers/resize.js +++ b/src/controllers/resize.js @@ -5,7 +5,8 @@ import Store from '../store'; import locale from '../locale/locale'; import sheetmanage from './sheetmanage'; import tooltip from '../global/tooltip' -import { $$ } from "../utils/util"; +import { $$, getObjType } from "../utils/util"; +import { defaultToolbar, toolbarIdMap } from './toolbar'; let gridW = 0, gridH = 0; @@ -329,157 +330,99 @@ export function menuToolBarWidth() { const toobarWidths = Store.toobarObject.toobarWidths = []; const toobarElements = Store.toobarObject.toobarElements = []; - const toobarConfig = Store.toobarObject.toobarConfig = { - undo: { - ele:'#luckysheet-icon-undo', - index:0, - }, //Undo redo - redo: { - ele:'#luckysheet-icon-redo', - index:1, - }, - paintFormat: { - ele:['#luckysheet-icon-paintformat','#toolbar-separator-paint-format'], - index:2, - }, //Format brush - currencyFormat: { - ele:'#luckysheet-icon-currency', - index:3, - }, //currency format - percentageFormat: { - ele:'#luckysheet-icon-percent', - index:4, - }, //Percentage format - numberDecrease: { - ele:'#luckysheet-icon-fmt-decimal-decrease', - index:5, - }, //'Decrease the number of decimal places' - numberIncrease: { - ele:'#luckysheet-icon-fmt-decimal-increase', - index:6, - }, //'Increase the number of decimal places - moreFormats: { - ele:['#luckysheet-icon-fmt-other','#toolbar-separator-more-format'], - index:7, - }, //'More Formats' - font: { - ele:['#luckysheet-icon-font-family','#toolbar-separator-font-family'], - index:8, - }, //'font' - fontSize: { - ele:['#luckysheet-icon-font-size','#toolbar-separator-font-size'], - index:9, - }, //'Font size' - bold: { - ele:'#luckysheet-icon-bold', - index:10, - }, //'Bold (Ctrl+B)' - italic: { - ele:'#luckysheet-icon-italic', - index:11, - }, //'Italic (Ctrl+I)' - strikethrough: { - ele:'#luckysheet-icon-strikethrough', - index:12, - }, //'Strikethrough (Alt+Shift+5)' - underline: { - ele:'#luckysheet-icon-underline', - index:13, - }, //'Underline (Alt+Shift+6)' - textColor: { - ele:['#luckysheet-icon-text-color','#luckysheet-icon-text-color-menu','#toolbar-separator-text-color'], - index:14, - }, //'Text color' - fillColor: { - ele:['#luckysheet-icon-cell-color','#luckysheet-icon-cell-color-menu'], - index:15, - }, //'Cell color' - border: { - ele:['#luckysheet-icon-border-all','#luckysheet-icon-border-menu'], - index:16, - }, //'border' - mergeCell: { - ele:['#luckysheet-icon-merge-button','#luckysheet-icon-merge-menu','#toolbar-separator-merge-cell'], - index:17, - }, //'Merge cells' - horizontalAlignMode: { - ele:['#luckysheet-icon-align','#luckysheet-icon-align-menu'], - index:18, - }, //'Horizontal alignment' - verticalAlignMode: { - ele:['#luckysheet-icon-valign','#luckysheet-icon-valign-menu'], - index:19, - }, //'Vertical alignment' - textWrapMode: { - ele:['#luckysheet-icon-textwrap','#luckysheet-icon-textwrap-menu'], - index:20, - }, //'Wrap mode' - textRotateMode: { - ele:['#luckysheet-icon-rotation','#luckysheet-icon-rotation-menu','#toolbar-separator-text-rotate'], - index:21, - }, //'Text Rotation Mode' - image:{ - ele:'#luckysheet-insertImg-btn-title', - index:22, - }, //'Insert link' - link:{ - ele:'#luckysheet-insertLink-btn-title', - index:23, - }, //'Insert picture' - chart: { - ele:'#luckysheet-chart-btn-title', - index:24, - }, //'chart' (the icon is hidden, but if the chart plugin is configured, you can still create a new chart by right click) - postil: { - ele:'#luckysheet-icon-postil', - index:25, - }, //'comment' - pivotTable: { - ele:['#luckysheet-pivot-btn-title','#toolbar-separator-pivot-table'], - index:26, - }, //'PivotTable' - function: { - ele:['#luckysheet-icon-function','#luckysheet-icon-function-menu'], - index:27, - }, //'formula' - frozenMode: { - ele:['#luckysheet-freezen-btn-horizontal','#luckysheet-icon-freezen-menu'], - index:28, - }, //'freeze mode' - sortAndFilter: { - ele:'#luckysheet-icon-autofilter', - index:29, - }, //'sort and filter' - conditionalFormat: { - ele:'#luckysheet-icon-conditionformat', - index:30, - }, //'Conditional Format' - dataVerification: { - ele:'#luckysheet-dataVerification-btn-title', - index:31, - }, // 'Data Verification' - splitColumn: { - ele:'#luckysheet-splitColumn-btn-title', - index:32, - }, //'Split column' - screenshot: { - ele:'#luckysheet-chart-btn-screenshot', - index:33, - }, //'screenshot' - findAndReplace: { - ele:'#luckysheet-icon-seachmore', - index:34, - }, //'Find and Replace' - protection:{ - ele:'#luckysheet-icon-protection', - index:35, - }, // 'Worksheet protection' - print:{ - ele:'#luckysheet-icon-print', - index:36, - }, // 'print' - }; + const toolbarConfig = Store.toobarObject.toolbarConfig = buildBoolBarConfig(); + + /** + * 基于 showtoolbarConfig 配置 动态生成 toolbarConfig + * @returns {object} + * @input showtoolbarConfig = ['undo', 'redo', '|' , 'font' , 'moreFormats', '|'] + * { + * undo: {ele: '#luckysheet-icon-undo', index: 0}, + * redo: {ele: ['#luckysheet-icon-redo', '#luckysheet-separator-redo'], index: 1}, + * undo: {ele: '#luckysheet-icon-font', index: 2}, + * moreFormats: {ele: ['#luckysheet-icon-fmt-other', '#luckysheet-separator-more-formats'], index: 3}, + * } + */ + function buildBoolBarConfig() { + const obj = {}; + // 数组形式直接生成 + if (getObjType(showtoolbarConfig) === 'array') { + // show 为 false + if (!showtoolbar) { + return obj; + } + let current,next; + let index = 0; + for (let i = 0; i +
+
+
+ +
+
+
+ `, + redo: `
+
+
+
+ +
+
+
+
`, + paintFormat: `
+
+
+
+ +
+
+
+
`, + currencyFormat: `
+
+
+
+ +
+
+
+
`, + percentageFormat: `
+
+
+
+ +
+
+
+
`, //Percentage format + numberDecrease: `
+
+
+
+ +
+
+
+
`, //'Decrease the number of decimal places' + numberIncrease: `
+
+
+
+ +
+
+
+
`, //'Increase the number of decimal places + moreFormats: `
+
+
+
+ ${defaultFmtArray[0].text} +
+
+
+
+
+
`, //'More Formats' + font: `
+
+
+
+ ${fontarray[0]} +
+
+
+
+
+
`, //'font' + fontSize: `
+
+
+
+ +
+
+
+
+
+
`, //'Font size' + bold: `
+
+
+
+ +
+
+
+
`, //'Bold (Ctrl+B)' + italic: `
+
+
+
+ +
+
+
+
`, //'Italic (Ctrl+I)' + strikethrough: `
+
+
+
+ +
+
+
+
`, //'Strikethrough (Alt+Shift+5)' + underline: `
+
+
+
+ +
+
+
+
`, //'Underline (Alt+Shift+6)' + textColor: `
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Text color' + fillColor: `
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Cell color' + border: `
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
`, //'border' + mergeCell: `
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
`, //'Merge cells' + horizontalAlignMode: `
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Horizontal alignment' + verticalAlignMode: `
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Vertical alignment' + textWrapMode: `
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Wrap mode' + textRotateMode: `
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
`, //'Text Rotation Mode' + image: `
+
+
+
+
+ +
+
+
+
+
`, // 'Insert picture' + link: ``, // 'Insert link'(TODO) + chart: `
+
+
+
+
+ +
+
+
+
+
`, //'chart' (the icon is hidden, but if the chart plugin is configured, you can still create a new chart by right click) + postil: `
+
+
+
+
+
+
+
+
+
`, //'comment' + pivotTable: `
+
+
+
+
+ +
+
+
+
+
`, //'PivotTable' + function: `
+
+
+
+ +
+
+ ${toolbar.sum} +
+
+
+
+
+
+
+
+
+
+
+
`, //'formula' + frozenMode: `
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
`, //'freeze mode' + sortAndFilter: `
+
+
+
+ +
+
+
+
+
+
`, //'Sort and filter' + conditionalFormat: `
+
+
+ +
+ +
+
+
+
+
+
`, //'Conditional Format' + dataVerification: `
+
+
+
+
+ +
+
+
+
+
`, // 'Data Verification' + splitColumn: `
+
+
+
+
+ +
+
+
+
+
`, //'Split column' + screenshot: `
+
+
+
+
+ +
+
+
+
+
`, //'screenshot' + findAndReplace: `
+
+
+ +
+ +
+
+
+
+
+
`, //'Find and Replace' + protection: `
+
+
+
+
+ +
+
+
+
+
`, // 'Worksheet protection' + print: `
+
+
+ +
+ +
+
+
+
+
+
` // 'print' + }; + + const showtoolbar = luckysheetConfigsetting.showtoolbar; + const showtoolbarConfig = luckysheetConfigsetting.showtoolbarConfig; + + const buttonHTML = ['
']; + + // 数组形式直接生成 + if (getObjType(showtoolbarConfig) === 'array') { + // 此时不根据 showtoolbar=false，showtoolbarConfig为某几个进行适配，此时showtoolbarConfig本身就是全部要显示的按钮 + if (!showtoolbar) { + return ''; + } + let i = 0; + showtoolbarConfig.forEach(function(key, i) { + if (key === '|') { + buttonHTML.push( + `
` + ); + } else { + buttonHTML.push(htmlMap[key]); + } + }); + return buttonHTML.join(''); + } + + const config = defaultToolbar.reduce(function(total, curr) { + if (curr !== '|') { + total[curr] = true; + } + return total; + }, {}); + + if (!showtoolbar) { + for (let s in config) { + config[s] = false; + } + } + + // 对象模式 则从里面挑选 true 保留 false 删掉 + if (JSON.stringify(showtoolbarConfig) !== '{}') { + if(showtoolbarConfig.hasOwnProperty('undoRedo')){ + config.undo = config.redo = showtoolbarConfig.undoRedo; + delete showtoolbarConfig.undoRedo; + } + Object.assign(config, showtoolbarConfig); + + for (let i = 0; i < defaultToolbar.length; i++) { + let key = defaultToolbar[i]; + if (!config[key]) { + // 如果当前元素隐藏 按照之前的规则 后面紧跟的 | 分割也不需要显示了 + if (defaultToolbar[i + 1] === '|') { + i++; + } + return; + } + if (key === '|') { + buttonHTML.push( + `
` + ); + } else { + buttonHTML.push(htmlMap[key]); + } + } + } + + return buttonHTML.join(''); +} + +/** + * camel 形式的单词转换为 - 形式 如 fillColor -> fill-color + * @param {string} camel camel 形式 + * @returns + */ +function camel2split(camel) { + return camel.replace(/([A-Z])/g, function(all, group) { + return '-' + group.toLowerCase(); + }); +} From 4dd527b6cf649a62e460f4664666db4d3081e293 Mon Sep 17 00:00:00 2001 From: cdswyda Date: Wed, 21 Apr 2021 19:00:25 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E9=85=8D=E7=BD=AE=E5=90=8E=E4=B8=8D?= =?UTF-8?q?=E4=BC=A0=20showtoolbar=20showtoolbarConfig=20=E6=97=B6?= =?UTF-8?q?=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/controllers/resize.js | 36 ++++++++++++++++------------- src/controllers/toolbar.js | 46 ++++++++++++++------------------------ src/utils/util.js | 13 ++++++++++- 3 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/controllers/resize.js b/src/controllers/resize.js index 8f61f21..6ee6aaf 100644 --- a/src/controllers/resize.js +++ b/src/controllers/resize.js @@ -5,7 +5,7 @@ import Store from '../store'; import locale from '../locale/locale'; import sheetmanage from './sheetmanage'; import tooltip from '../global/tooltip' -import { $$, getObjType } from "../utils/util"; +import { $$, getObjType, camel2split } from "../utils/util"; import { defaultToolbar, toolbarIdMap } from './toolbar'; let gridW = 0, @@ -344,18 +344,14 @@ export function menuToolBarWidth() { * } */ function buildBoolBarConfig() { - const obj = {}; - // 数组形式直接生成 - if (getObjType(showtoolbarConfig) === 'array') { - // show 为 false - if (!showtoolbar) { - return obj; - } + let obj = {}; + function array2Config(arr) { + const obj = {}; let current,next; let index = 0; - for (let i = 0; i` - ); - } else { - buttonHTML.push(htmlMap[key]); + } + for (let i = 0; i < defaultToolbar.length; i++) { + let key = defaultToolbar[i]; + if (!config[key] && key !== '|') { + // 如果当前元素隐藏 按照之前的规则 后面紧跟的 | 分割也不需要显示了 + if (defaultToolbar[i + 1] === '|') { + i++; } + continue; + } + if (key === '|') { + buttonHTML.push( + `
` + ); + } else { + buttonHTML.push(htmlMap[key]); } } - + console.log(buttonHTML); return buttonHTML.join(''); } - -/** - * camel 形式的单词转换为 - 形式 如 fillColor -> fill-color - * @param {string} camel camel 形式 - * @returns - */ -function camel2split(camel) { - return camel.replace(/([A-Z])/g, function(all, group) { - return '-' + group.toLowerCase(); - }); -} diff --git a/src/utils/util.js b/src/utils/util.js index b088d5d..0a69743 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -871,6 +871,16 @@ function arrayRemoveItem(array, item) { }) } +/** + * camel 形式的单词转换为 - 形式 如 fillColor -> fill-color + * @param {string} camel camel 形式 + * @returns + */ + function camel2split(camel) { + return camel.replace(/([A-Z])/g, function(all, group) { + return '-' + group.toLowerCase(); + }); +} export { isJsonString, @@ -900,5 +910,6 @@ export { transformRangeToAbsolute, openSelfModel, createProxy, - arrayRemoveItem + arrayRemoveItem, + camel2split } \ No newline at end of file From c511651f94957379c1738fbf80ad51a29316506d Mon Sep 17 00:00:00 2001 From: cdswyda Date: Thu, 22 Apr 2021 08:30:11 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=20console?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/controllers/toolbar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/controllers/toolbar.js b/src/controllers/toolbar.js index d36cbc1..6156110 100644 --- a/src/controllers/toolbar.js +++ b/src/controllers/toolbar.js @@ -894,6 +894,5 @@ export function createToolbarHtml() { buttonHTML.push(htmlMap[key]); } } - console.log(buttonHTML); return buttonHTML.join(''); } From 76fabee52b7900963a69f5fee9ebc390ed767c2b Mon Sep 17 00:00:00 2001 From: cdswyda Date: Thu, 22 Apr 2021 12:33:31 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20showtoolbar=20?= =?UTF-8?q?=E4=B8=BA=20false=20=E6=97=B6=E7=9A=84=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/controllers/resize.js | 78 +-------------------------------------- 1 file changed, 1 insertion(+), 77 deletions(-) diff --git a/src/controllers/resize.js b/src/controllers/resize.js index 6ee6aaf..4673d5c 100644 --- a/src/controllers/resize.js +++ b/src/controllers/resize.js @@ -416,7 +416,7 @@ export function menuToolBarWidth() { } } } else { - obj = array2Config(defaultToolbar); + obj = showtoolbar ? array2Config(defaultToolbar) : {}; } return obj; @@ -428,82 +428,6 @@ export function menuToolBarWidth() { } } - /* - const config = { - undo: true, //Undo - redo: true, //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'(TODO) - 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' - } - - // false means all false - if(!showtoolbar){ - for(let s in config){ - config[s] = false; - } - } - - // showtoolbarConfig determines the final result - if(JSON.stringify(showtoolbarConfig) !== '{}'){ - if(showtoolbarConfig.hasOwnProperty('undoRedo')){ - config.undo = config.redo = showtoolbarConfig.undoRedo; - - delete showtoolbarConfig.undoRedo; - } - Object.assign(config,showtoolbarConfig); - } - - // 1. The button set to false, remove the dom - // 2. Build toobarWidths and toobarElements - for(let s in config){ - if(config[s]){ - toobarElements.push($.extend(true,{},toobarConfig[s])); - - }else{ - if(toobarConfig[s].ele instanceof Array){ - for(const item of toobarConfig[s].ele){ - $(item).remove(); - } - }else{ - $(toobarConfig[s].ele).remove(); - } - } - } - */ - toobarElements.sort(sortToolbar); function sortToolbar(a,b) {