Wangeditor自定義菜單詳解

一、Wangeditor自定義菜單圖標

Wangeditor是一款優秀的富文本編輯器，提供了豐富的編輯功能，同時也支持自定義菜單，通過自定義菜單可以擴展編輯器的功能。對於自定義菜單而言，圖標是非常重要的一部分，可以增強用戶的交互性，更美觀的呈現效果。下面是一個簡單的示例，演示如何在Wangeditor中自定義一個圖標菜單。

// 自定義菜單
editor.config.menus = [
    ...
    'customIcon',
    ...
];

// 自定義菜單處理函數
editor.menus.customIcon = {
    ...
    // 添加圖標樣式
    style: 'background:url(https://xxxxx/icon.png) center center no-repeat;background-size:20px;',
    ...
};

在自定義菜單處理函數中，添加了一個樣式style來指定背景圖標，通過設置樣式的方式來實現自定義圖標效果。樣式的值可以是背景圖像的url或其他格式的值。

二、Wangeditor圖片上傳自定義選取

圖片上傳是一個常用的功能，為了讓用戶更加方便的上傳圖片，Wangeditor提供了圖片上傳的自定義選取功能。用戶可以自行添加上傳選取控制項，增強用戶交互性，下面是一個簡單的示例，演示如何在Wangeditor中自定義圖片上傳選取框。

// 圖片上傳自定義處理函數
editor.config.customUploadImg = function (files, insert) {
    ...
    // 添加自定義選取框
    var input = document.createElement('input');
    input.type = 'file';
    input.onchange = function () {
        ...
        // 調用圖片上傳處理函數
        _this.doUpload(files, insert);
    };
    input.click();
    ...
};

在自定義圖片上傳處理函數中，添加了一個input元素，來實現自定義選取框，用戶可以根據需求自行樣式修改控制項的外觀，在onchange事件中調用圖片上傳處理函數，完成上傳圖片的功能。

三、Wangeditor自定義字體大小

在編輯內容時，字體大小是一個常用的功能，對於某些用戶而言，系統自帶的字體大小可能無法滿足他們的需求，因此Wangeditor提供了自定義字型大小的功能，用戶可以根據需求來設置字體大小。下面是一個簡單的示例，演示如何在Wangeditor中自定義字體大小功能。

// 自定義菜單
editor.config.menus = [
    ...
    'fontSize',
    ...
];

// 自定義字體大小處理函數
editor.menus.fontSize = {
    ...
    // 定義字體大小樣式
    type: 'dropPanel',
    width: 80,
    height: 'auto',
    content: makePanel(makeList(['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']), menu),
    ...
};

在自定義菜單處理函數中，添加了一個fontSize菜單，定義字體大小的樣式，包括字體大小和寬度等屬性。通過makePanel和makeList函數，生成了一個下拉選取框，用戶可以在該選取框中選擇自己需要的字體大小。

四、Wangeditor自定義文字顏色

為了讓用戶更加方便的調整文字的顏色，Wangeditor提供了自定義文字顏色的功能，用戶可以根據需求選擇不同的顏色。下面是一個簡單的示例，演示如何在Wangeditor中自定義文字顏色功能。

// 自定義菜單
editor.config.menus = [
    ...
    'foreColor',
    ...
];

// 自定義文字顏色菜單處理函數
editor.menus.foreColor = {
    ...
    // 定義顏色選擇框
    type: 'colorPicker',
    width: 150,
    height: 150,
    title: '更改文字顏色',
    data: colors,
    ...
};

在自定義菜單處理函數中，添加了一個foreColor菜單，它定義了顏色選擇框的相關屬性，包括選取框的大小、標題、顏色數據等參數。通過調用Wangeditor提供的colorPicker組件，自動生成一個顏色選取框。