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 `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `;
-}
-
+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: ``, //'More Formats'
+ font: ``, //'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: `
+ `, //'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();
+ });
+}