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组件，自动生成一个颜色选取框。