wangeditor工具栏配置

wangeditor是一个基于JavaScript的富文本编辑器，它提供了丰富的工具栏配置选项，可以根据需求进行定制。下面是一个基本的wangeditor工具栏配置示例：

const editor = new wangEditor('#editor');

editor.config.menus = [
  'bold',  // 加粗
  'italic',  // 斜体
  'underline',  // 下划线
  'head',  // 标题
  'list',  // 列表
  'link',  // 链接
  'quote',  // 引用
  'image',  // 插入图片
  'undo',  // 撤销
  'redo'  // 重做
];

editor.create();

这个示例中的工具栏配置包括了常用的加粗、斜体、下划线、标题、列表、链接、引用、插入图片、撤销和重做等功能。你可以根据自己的需求，添加或删除菜单项。更多关于wangeditor的工具栏配置选项，你可以参考其官方文档。

相关问题

wangEditor 工具栏配置

wangEditor 的工具栏配置可以通过以下两种方式实现：

1. 使用默认配置

在实例化 wangEditor 编辑器时，可以不传入任何参数，这样编辑器就会使用默认的工具栏配置。默认配置包含常用的工具按钮，如加粗、斜体、下划线、删除线、字体颜色、背景色、插入链接、插入图片、插入表格等。

// 实例化编辑器
const editor = new wangEditor('#editor')

2. 自定义配置

如果要自定义工具栏配置，需要在实例化编辑器时传入一个配置对象，其中的 `toolbar` 属性可以用于配置工具栏，它是一个数组，每个元素表示一个工具按钮，可以是字符串或对象。

// 自定义工具栏配置
const config = {
  // 工具栏配置
  toolbar: [
    'bold', 'italic', 'underline', 'strikethrough', '|',
    'head', 'list', 'indent', '|',
    'link', 'image', 'table', '|',
    'quote', 'code', 'hr', 'emoji', '|',
    'undo', 'redo'
  ]
}

// 实例化编辑器
const editor = new wangEditor('#editor', config)

上面代码中，工具栏配置数组中的每个元素可以是字符串或对象。如果是字符串，则表示使用 wangEditor 内置的工具按钮；如果是对象，则需要指定以下属性：

- `name`：工具按钮名称，必须与 wangEditor 内置的名称不同；
- `title`：工具按钮标题；
- `type`：工具按钮类型，可选值为 `'btn'`（普通按钮）或 `'dropList'`（下拉列表）；
- `options`：当 `type` 为 `'dropList'` 时，该属性表示下拉列表中的选项，是一个数组，每个元素是一个对象，包含 `name` 和 `title` 两个属性。

下面是一个自定义工具栏配置的例子：

const config = {
  // 工具栏配置
  toolbar: [
    'bold', 'italic', 'underline', 'strikethrough', '|',
    { name: 'head', title: '标题', type: 'dropList', options: [
      { name: 'h1', title: '标题1' },
      { name: 'h2', title: '标题2' },
      { name: 'h3', title: '标题3' }
    ]},
    { name: 'list', title: '列表', type: 'dropList', options: [
      { name: 'ol', title: '有序列表' },
      { name: 'ul', title: '无序列表' }
    ]},
    'indent', '|',
    { name: 'quote', title: '引用', type: 'dropList', options: [
      { name: 'quote', title: '普通引用' },
      { name: 'code', title: '代码引用' }
    ]},
    'link', 'image', 'table', '|',
    'undo', 'redo'
  ]
}

// 实例化编辑器
const editor = new wangEditor('#editor', config)

vue3 wangeditor工具栏配置

### Vue3 中集成 wangeditor 编辑器并配置工具栏

在 Vue3 项目中集成 `wangeditor` 并自定义其工具栏是一个常见的需求。以下是详细的实现过程：

#### 安装依赖包
为了能够在 Vue3 项目中使用 `wangeditor`，需要先安装必要的 npm 包。

npm install @wangeditor/editor @wangeditor/editor-for-vue --save

这一步骤确保了编辑器核心库及其针对 Vue 的封装都被正确引入到项目当中[^4]。

#### 创建编辑器实例
接下来，在 Vue 组件内部创建一个新的 Editor 实例，并对其进行初始化设置。

import { onBeforeUnmount, ref } from 'vue';
import E from '@wangeditor/editor/dist/base-editor'; // 引入 editor 对象
import '@wangeditor/editor/dist/css/style.css';     // 引入默认样式文件
import createEditor from '@wangeditor/editor-for-vue';

export default {
    setup() {
        const editorRef = ref(null);
        
        let editor;
        const initEditor = () => {
            if (editor == null) {
                editor = new E(editorRef.value);

                // 自定义菜单配置项
                editor.config.menus = [
                    'head',               // 标题
                    'bold',              // 粗体
                    'fontSize',          // 字号
                    'fontName',         // 字体
                    'italic',           // 斜体
                    'underline',        // 下划线
                    'strikeThrough',    // 删除线
                    'foreColor',        // 文字颜色
                    'backColor',        // 背景颜色
                    'link',             // 插入链接
                    'list',             // 列表
                    'justify'           // 对齐方式
                ];

                editor.create();
            }
        };

        onBeforeUnmount(() => {
            if (editor != null) {
                editor.destroy();  // 销毁编辑器
            }
        });

        return {
            editorRef,
            initEditor
        };
    },
};

上述代码展示了如何通过修改 `menus` 属性来自定义工具栏中的按钮集合[^1]。

#### 渲染编辑区域
最后，在模板部分添加用于承载编辑器 DOM 结构的容器节点，并调用之前定义好的初始化函数完成渲染工作。

<template>
<div id="app">
    <!-- 编辑区 -->
    <div class="text-container" :ref="(el) => editorRef = el"></div>

    <!-- 初始化编辑器 -->
    <button type="button" @click="initEditor">初始化</button>
</div>
</template>

这样就完成了基于 Vue3 和 `wangeditor` 的富文本编辑器的基础搭建以及简单的工具栏定制化操作[^2]。