如何实现自适应卡片设计器

问题描述 投票:0回答:1

说明: 我正在尝试将自适应卡片设计器与摩纳哥编辑器集成。但是,我在模块加载方面遇到了一些问题,例如:

错误:es.global-this.js:7未捕获的类型错误:$不是函数

错误:“未捕获的错误:每个脚本文件只能有一个匿名定义调用。”

错误:“ACDesigner 未定义。”

这是我当前的设置。我已通过 CDN 或模块安装包含了所有必要的脚本 安装模块=>“adaptivecards-designer”:“2.4.4” "摩纳哥编辑": "^0.29.1" 节点版本 => 18.18.1

function setup() {
      const monaco = await loader.init();
      // ACDesigner.CardDesigner.onProcessMarkdown = (text, result) => {
      //   result.outputHtml = new markdownit().render(text);
      //   result.didProcess = true;
      // };
      ACDesigner.GlobalSettings.showVersionPicker = true;
      ACDesigner.GlobalSettings.enableDataBindingSupport = true;
      ACDesigner.GlobalSettings.showDataStructureToolbox = false;
      ACDesigner.GlobalSettings.showSampleDataEditorToolbox = true;

      // /* Configure toolbox titles */
      // ACDesigner.Strings.toolboxes.cardEditor.title = "WORKELEVAE";

      let designer = new ACDesigner.CardDesigner([
        new ACDesigner.WebChatContainer(
          "Bot Framework WebChat",
          "containers/webchat-container.css"
        ),
        new ACDesigner.TeamsContainer(
          "Teams Dark Container",
          "containers/teams-container.css"
        ),
        new ACDesigner.TeamsContainer(
          "Teams Light Container",
          "containers/teams-container.css"
        ),
        new ACDesigner.DefaultContainer(
          "Default Container",
          "containers/teams-container.css"
        )
      ]);

      // Modify the UI with custom elements
      // let wgButton = new ACDesigner.ToolbarButton(
      //   "Save",
      //   "Save",
      //   null,
      //   (sender) => {
      //     // alert("Workgrid says hi!");
      //     // console.log(designer.getBoundCard()) # To get the Card Value
      //     // console.log(designer.getCard())  # Same to get the Card Value
      //     console.log(designer.getCard())
      //     // var data1 = { domain: "progressive", Bot_name: botType, Channel: ChannelName, template: TemplateName, Notification: Notification, json: designer.getCard(), card_type: "Bot Notification" }
      //     // console.log(data1);
      //   }
      // );
      // wgButton.separator = true;
      // wgButton.style = "background-color: #2D7BB7";
      // designer.toolbar.insertElementAfter(
      //   wgButton,
      //   ACDesigner.CardDesigner.ToolbarCommands.HostAppPicker
      // );
      
      // Attach the designer into the DOM
      designer.bindingPreviewMode = ACDesigner.BindingPreviewMode.SampleData;
      designer.attachTo(document.getElementById("editor"));
      designer.monacoModuleLoaded(monaco); // :D
      // setmonocovalue(designer.monacoModuleLoaded(monaco))
      setCardjson(designer.getCard())
    }
    setup();
javascript reactjs node.js adaptive-cards msteams-react-base-component
1个回答
-1
投票

您可以尝试使用此自适应卡片模板生成器来从此自适应卡片生成器创建自适应卡片。

  1. https://diybuilder.in/adaptive-cards-builder/templates.php
  2. https://diybuilder.in/adaptive-cards-builder/cards.php
  3. https://diybuilder.in/adaptive-cards-builder/forms.php

谢谢

© www.soinside.com 2019 - 2024. All rights reserved.