Set the default values of the editor on load

This issue has been tracked since 2022-03-16.

I want to set the default background color to white and the content width to 100% but haven't found a good way to do this yet. I am using React v17.0.2

The following code doesn't seem to work:

unlayer.setBodyValues({
  backgroundColor: "#e7e7e7",
  contentWidth: "500px", // or percent "50%"
  fontFamily: {
    label: "Helvetica",
    value: "'Helvetica Neue', Helvetica, Arial, sans-serif"
  },
  preheaderText: "Hello World"
});

This code seems to work for 1 second, then the styles are reset to the email editor's defaults:

emailEditorRef.current.editor.loadBlank({
          backgroundColor: "#fff",
        });

Has anyone found a solution to this?

nkrmr wrote this answer on 2022-03-17

I have the same issue it is not possible to set a default backgroundColor.
The loadBlank doesn't work

ryan-xin wrote this answer on 2022-03-22

Found a way to use Events

            unlayerEditor.loadBlank({
              backgroundColor: "#f5f5f5",
            });
            unlayerEditor.addEventListener("design:loaded", () => {
              unlayerEditor.setBodyValues({
                backgroundColor: "#f5f5f5",
                contentWidth: "100%",
              });
            });
brunolemos wrote this answer on 2022-04-21

@anargiris: This code seems to work for 1 second, then the styles are reset to the email editor's defaults:

emailEditorRef.current.editor.loadBlank({
 backgroundColor: "#fff",
});

@nkrmr: I have the same issue it is not possible to set a default backgroundColor.
The loadBlank doesn't work

The loadBlank(bodyValues) issue has been fixed.

About setBodyValues, the current recommendation is to call it either on design:loaded or editor:ready.
Thanks!

brunolemos wrote this answer on 2022-04-28

As of v1.2.160 you can call .setBodyValues normally right after .loadDesign without the need of using an event.

More Details About Repo
Owner Name unlayer
Repo Name react-email-editor
Full Name unlayer/react-email-editor
Language JavaScript
Created Date 2017-10-01
Updated Date 2022-12-05
Star Count 3598
Watcher Count 48
Fork Count 627
Issue Count 163

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date