Tinymce 插件管理器 - 动态初始选择框值

Question

我使用的是Tinymce v6.7.0。我想要列表框的初始值。但不知何故我无法设置这些值。 Tinymce 插件管理器 - 窗口

这是脚本：

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      /* Open window */

      let selectboxCount = 3;

      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
              value: "3", // this isn't work
            })),
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: {
          title: "something",
          selectbox2: "3", // this is work, but I need dynamically initial values
          ...Array.from({ length: selectboxCount }, (_, index) => ({
            //this isn't work
            [`selectbox${index + 1}`]: "3",
          })),
        },

        onSubmit: (api) => {},
      });
    },
  });
});

我尝试在创建选择框时设置值。

value: "3", // this isn't work

我尝试在initialData函数中设置值。

selectbox2: "3", // this is work, but I need dynamically initial values
...Array.from({ length: selectboxCount }, (_, index) => ({ //this isn't work
    [`selectbox${index + 1}`]: "3",
})),

，但只有 selectbox2 获得所需的值“3”。

编辑：

所以我找到了一个答案，但我不知道如何在我的情况下使用。 editor.windowManager.open() 的返回值是一个 Dialog Instance API，它有一个 setData 方法tiny.cloud/docs/ui-components/dialog/#dialogdataandstate github.com/tinymce/tinymce/issues/4765

Answer 1

我对结果有点失望，但效果很好：

tinymce.PluginManager.add("ag-grid", function (editor, url) {
  editor.ui.registry.addToggleButton("ag-grid", {
    onAction: () => {
      let selectboxCount = 3;

      const createwindowprom = new Promise((resolve, reject) => {
      const panel = editor.windowManager.open({
        title: "Settings",
        body: {
          type: "panel",
          items: [
            {
              type: "input",
              name: "title",
              label: "Title:",
            },
            ...Array.from({ length: selectboxCount }, (_, index) => ({
              type: "selectbox",
              name: `selectbox${index + 1}`,
              label: `Select Box ${index + 1}`,
              items: [
                { text: "Option 1", value: "1" },
                { text: "Option 2", value: "2" },
                { text: "Option 3", value: "3" } /* preselect this option */,
              ],
            })),
          ],
        },
        buttons: [
          {
            type: "submit",
            text: "Save",
            buttonType: "primary",
          },
        ],
        onChange: function (dialogApi, details) {},
        initialData: {
          title: "something",
        },
        onSubmit: (api) => {}
      });
      resolve(panel);
    });

    createwindowprom.then(
      (panel) => {
        for (let index = 0; index < selectboxCount; index++) {
          panel.setData({  [`selectbox${index + 1}`]: "3", })
        }
      },
      (reason) => {
        console.error(reason); // Error!
      },
    );

    },
  });
});