Блог

Как воспроизвести ошибку?

1. Установите приложение grapes js в приложении react
2. Перейдите в редактор и перетащите компонент. ( Пример : текстовый компонент)
3. Создайте стиль компонента с помощью менеджера стилей
4. сохраните его в БД и посмотрите код в редакторе
5. Перезагрузите страницу
6. смотрите код в редакторе

Каково ожидаемое поведение? Идентификаторы тегов html и css для этих идентификаторов не должны быть изменены или удалены, даже если перезагрузить редактор

Каково текущее поведение? Если мы перезагружаем редактор после каких-либо изменений , идентификаторы в html-коде изменяются, а 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);
          });