CKeditor小部件:如何根据输入到编辑器对话框中的内容返回不同的编辑器小部件

时间:2019-06-26 16:57:10

标签: ckeditor ckeditor4.x

我有一个块,内容编辑器可以在对话框中添加一些文本以及图像或视频。

如果用户在对话框中添加youtube网址,则小部件应返回与视频相关的其他字段,但如果他们没有添加youtube网址,则不会返回。

我试图根据用户是否输入了视频网址来添加条件,但是我似乎无法访问甚至无法在对话框中记录输入的数据。

export default function(editor) {
  CKEDITOR.dialog.add("imageTextBlockWidget", () => ({
    title: "Edit image and text block",
    contents: [
      {
        id: "info",
        elements: [
          {
            id: "columns",
            type: "select",
            label: "Image and text column split",
            items: [
              ["25/75", "25-75"],
              ["40/60", "40-60"],
              ["50/50", "50-50"],
              ["60/40", "60-40"]
            ],
            setup(w) {
              this.setValue(w.data.columns);
            },
            commit(w) {
              w.setData("columns", this.getValue());
            }
          },
          {
            id: "imageAlignment",
            type: "select",
            label: "Align image to the right or the left",
            items: [["Left", "left"], ["Right", "right"]],
            setup(w) {
              this.setValue(w.data.imageAlignment);
            },
            commit(w) {
              w.setData("imageAlignment", this.getValue());
            }
          },
          {
            id: "youtube",
            type: "text",
            label: "If you wish to use a video instead of an image, enter the Youtube url here",
            setup: function setup(w) {
              this.setValue(w.data.youtube);
            },
            commit: function commit(w) {
              w.setData("youtube", this.getValue());
            }
          }
        ]
      }
    ]
  }));

  if (CKEDITOR.instances.youtube !== '') {
    return editor.widgets.add("imageTextBlock", {
      // show video related fields
    }
  } else {
    return editor.widgets.add("imageTextBlock", {
      // show image related fields
    }
  }

}

如果添加了youtube网址,我想显示一个单独的模板,但是,我正在渲染相同的模板。

有什么想法吗?如果条件可以解决,我可以做剩下的事。

预先感谢

0 个答案:

没有答案