How do I use init()/registerTool() etc. in angular?

[hhetland]

For example - how would I implement the following in Angular?

unlayer.registerTool({ name: 'my_tool', label: 'My Tool', icon: 'fa-smile', supportedDisplayModes: ['web', 'email'], options: {}, values: {}, renderer: { Viewer: unlayer.createViewer({ render(values) { return "

I am a custom tool.

" } }), exporters: { web: function(values) { return "

I am a custom tool.

" }, email: function(values) { return "

I am a custom tool.

" } }, head: { css: function(values) {}, js: function(values) {} } } });

or this..:

unlayer.init({ className: 'unlayer-editor', displayMode: 'email' customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'], })

I have tried:
this.emailEditor.editor.init({ className: 'unlayer-editor', displayMode: 'email' customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'], })

But this does not work / only duplicates the editor instance

[schimini]

@hhetland We should continue this here... ~from here i suppose you're missing the id, so init creates a new editor. but i'm not totally sure~ Actually inferring from the source code, the id should already be set on creation

[hhetland]

Yes, the editor id is set on creation and it is editor-1 (and incrementing)

If I add the below code to editorLoaded(event) the editor is duplicated - but the customCSS is not loaded.

So either I´m totally lost - or something is missing/wrong in the Angular wrapper regarding this..

this.emailEditor.editor.init({ id: 'editor-1', customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'], })

If the demo code was updated with working init() code and registerTool() code - and not least with example on how to add a project ID so that it would communicate with Unlayer and enabling loading templates / images from the IUnlayer account I believe this Angular Component would be easier to set up and use for Unlayer customers or potential customers.. ;)

[noveltieng]

Yes, the editor id is set on creation and it is editor-1 (and incrementing)

If I add the below code to editorLoaded(event) the editor is duplicated - but the customCSS is not loaded.

So either I´m totally lost - or something is missing/wrong in the Angular wrapper regarding this..

this.emailEditor.editor.init({ id: 'editor-1', customCSS: ['https://examples.unlayer.com/examples/custom-css/custom.css'], })

If the demo code was updated with working init() code and registerTool() code - and not least with example on how to add a project ID so that it would communicate with Unlayer and enabling loading templates / images from the IUnlayer account I believe this Angular Component would be easier to set up and use for Unlayer customers or potential customers.. ;)

Hi, did you manage to solve this issue?

[Ilijan91]

is there any update for this?

[deepakverma91123]

is there any update for this?

custom tools plz provide artical

[Mallesh-Nagothi]

is there any update for this?

[mindfl0w]

Facing the same issue, tried everything that came to my mind in order to update property/value of the tool, that I have created in the Unlayer dashboard via the angular wrapper, but without any success

[kikusempai]

I faced the same issue before and talked to support about it. If someone still needs the solution, here you go. In Angular don't use init(), it doesn't seem to work. You can pass parameters in your options. Example html:

<email-editor
        [appearance]="appearance"
        [projectId]=projectIdValue
        [options]="options"
        (loaded)="editorLoaded()"
></email-editor>

In your component create appearance, options and projectIdValue variables (I'll include some other values for reference). You can put your custom tool declaration into a separate file (I'll use their documentation example) and reference it in customJS section in options variable:

projectIdValue = 1111111;

appearance = {
    theme: 'light'
};

options = {
    editor: {
      autoSelectOnDrop: true
    },
    features: {
      undoRedo: true,
      sendTestEmail: false, 
      ai: true,
      userUploads: true
    },
    tools: {
      image: {
        enabled: true
      },
      social: {
        enabled: true
      }
    },
    customJS: [
      'https://examples.unlayer.com/examples/custom-tool-data/custom.js'
    ],
    user: {
      id: '1'
    },
    displayMode: 'email',
    fonts: {
      showDefaultFonts: false,
    }
  };

Make sure to include your project id and some user id in options (and it has to be a string) otherwise custom (paid) features won't initialize. Also don't put relative file address in customJS section - file address will be interpreted as script itself. So either URL or plain javascript.