wangEditor 异步SelectMenu ？

Question

wangEditor 异步SelectMenu ？

菜瓜

622

发布于
2023-11-16 广东

请问一下v4版本的wangEditor，SelectMenu 里面的options列表是后端返回来的，这时候该怎么设置？

javascript html vue.js

阅读 830

AI BotBETA

wangEditor 是一个富文本编辑器，它支持从后端获取数据并在编辑器中展示。当 SelectMenu 的 options 列表需要从后端获取时，你可以通过以下步骤进行设置：

在后端编写 API 接口，该接口负责从数据库或其他数据源中获取 options 列表，并将其以 JSON 格式返回。
在前端使用 AJAX 或 fetch API 向后端发送异步请求，请求 options 列表数据。这可以通过在编辑器初始化时执行异步操作来实现，或者在编辑器需要更新 options 列表时触发。
当后端返回 options 列表数据后，使用 JavaScript 将数据设置到 SelectMenu 的 options 属性中。这可以通过直接修改 SelectMenu 实例的 options 属性或使用编辑器提供的 API 来实现。

以下是一个简单的示例代码，演示了如何在 wangEditor 中设置异步 SelectMenu：

// 创建 wangEditor 实例
var editor = new wangEditor('editor-container');

// 初始化 SelectMenu
editor.config.menus = [
  {
    type: 'select',
    label: '选择菜单',
    options: [], // 初始化为空数组
    handler: function(选中项) {
      // 处理选中项的逻辑
    }
  }
];

// 异步加载 SelectMenu 的 options 列表
editor.on(' ready', function() {
  // 向后端发送异步请求获取 options 列表数据
  fetch('/api/options') // 假设后端 API 地址为 /api/options
    .then(response => response.json())
    .then(data => {
      // 将获取到的数据设置到 SelectMenu 的 options 属性中
      editor.config.menus[0].options = data; // 将 data 数组设置为 SelectMenu 的 options
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

在上面的示例中，我们首先创建了一个 wangEditor 实例，并定义了一个 SelectMenu。在编辑器准备就绪时，我们发送一个异步请求到 /api/options 获取 options 列表数据。当数据返回后，我们将其设置到 SelectMenu 的 options 属性中。这样，SelectMenu 就会显示从后端获取的 options 列表了。

1 个回答

得票最新

hfhan

29k72241

发布于
2023-11-17 安徽

在SelectMenu的constructor中，把options的值写在this上，然后getOptions中返回this.options。异步接口获取options后赋值到this.options上，如有必要再更新下editor

撰写回答