编辑器wangeditor的工具栏不点击正文不能使用

你可以通过设置 `onfocus` 事件来实现点击正文时工具栏可用的功能。以下是一个示例代码：

// 获取编辑器实例
const editor = new wangEditor('#editor');

// 监听编辑器焦点事件
editor.customConfig.onfocus = function () {
  // 将工具栏按钮设为可用状态
  editor.$toolbar.find('.w-e-button').removeAttr('disabled');
};

// 创建编辑器
editor.create();

在上述代码中，我们通过设置 `onfocus` 事件，当编辑器获得焦点时，将工具栏按钮的 `disabled` 属性移除，从而使其可用。

请注意，上述代码是针对 wangeditor 版本 4.x 的，如果你使用的是其他版本，请参考对应版本的文档进行设置。

相关问题

wangeditor工具栏

### wangeditor 工具栏配置使用教程

#### 初始化编辑器和工具栏
为了正确配置 `wangeditor` 的工具栏，在 Vue 或其他 JavaScript 项目中，需先引入核心组件并创建相应的实例。通过指定容器的选择器以及传递配置对象来完成这一过程。

import { createEditor, createToolbar } from 'wangeditor'

// 创建编辑器实例
const editor = createEditor({
    selector: '#editor-container',
    config: {
        // 编辑器特定配置项
    }
})

// 创建工具栏实例
const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: {
        // 工具栏具体设置选项
    }
})

#### 自定义工具栏按钮
对于希望调整默认行为或添加额外功能的情况，可以通过修改 `config` 参数来自定义工具栏中的按钮集合。这允许开发者根据实际需求灵活定制界面布局[^2]。

{
    "toolbars": [
        ['source', 'undo', 'redo'], 
        ['bold', 'italic', 'underline'],
        ["insertorderedlist", "insertunorderedlist"],
        ["justifyleft","justifycenter","justifyright"]
    ]
}

上述 JSON 片段展示了如何分组排列不同的命令按钮；每一对方括号代表一行显示的控件列表。可以根据官方文档进一步探索更多可用的操作名称及其含义[^3]。

#### 解决工具栏失效问题
当遇到部分工具栏无法正常工作的情形时，建议检查以下几个方面：

- 确认 HTML 中是否有对应的 DOM 结构存在；
- 查看控制台是否存在报错信息影响脚本执行；
- 对比版本差异，确保使用的 API 符合当前安装包的要求[^1]。

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)