1

如何重现错误？

  1. 在反应应用程序中安装葡萄 js
  2. 转到编辑器并拖动一个组件。（示例：文本组件）
  3. 使用样式管理器为组件设置样式
  4. 将其保存到数据库中并在编辑器中查看代码
  5. 重新加载页面
  6. 在编辑器中查看代码

预期的行为是什么？ 即使重新加载编辑器，也不应更改或删除该 id 的 html 标签 id 和 css

当前的行为是什么？ 如果我们在任何更改后重新加载编辑器，则 html 代码中的 id 会更改，并且该 id 的 css 会被删除。

如果需要执行一些代码以重现错误，请将其粘贴在下面：

      const editor = grapesjs.init({
            container: "#block",
            canvas: {
              styles: [
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
              ],
              scripts: [
                "https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js",
                "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js",
              ],
            },
            protectedCss: "",
            commands: {
              defaults: [
                {
                  id: "my-command-id",
                  run() {
                    alert("This is my command");
                  },
                },
              ],
            },
            plugins: ["gjs-preset-webpage"],
            storageManager: {
              id: "gjs_",
              type: "remote",
              autosave: true,
              autoload: true,
              urlStore: this.API_URL + "update_builder/" + this.state.id,
              urlLoad: this.API_URL + this.state.id,
              //method: 'patch',
              params: {
                draft: "1",
              },
              headers: {},
            },
            assetManager: {
              storageType: "",
              storeOnChange: true,
              storeAfterUpload: true,
              upload: "https://localhost/assets/images", //for temporary storage
              assets: [],
              uploadName: "file",
              uploadFile: function (e) {
                var files = e.dataTransfer
                  ? e.dataTransfer.files
                  : e.target.files;
                var formData = new FormData();
                for (var i in files) {
                  formData.append("upload", files[i]); //containing all the selected images from local
                }
                PageService.contentUpload(formData)
                  .then((response) => {
                    console.log(response.data.path);
                    editor.AssetManager.add(response.data.path);
                  })
                  .catch((error) => {
                    // this.alert.show(error.response.data.message,{type:'error'});
                  });
              },
            },
            pageManager: {
              pages: this.pagesList,
            },
            layerManager: {
              appendTo: ".layers-container",
            },
            styleManager: {
              appendTo: '.style-container' 
            },
          });

          const pageManager = editor.Pages;
          const pagesList = pageManager.getAll();
          this.pages = pagesList;
          this.editorData = editor;
          editor.store((res) => (this.callBackAlert = true));

          editor.on("storage:start:store", (objectToStore) => {
            console.log(objectToStore);
          });




          Banner(editor);
          // Resizing the components
          editor.on("component:selected", function (args) {
            args.set("resizable", true);
          });
4

0 回答 0