Can not add custom tool

[pateras95]

I was trying to add a custom tool on vue js component as the documentation for react shows with no luck. Can you demonstrate the correct way to add a new custom tool on vue .js

[josestbernard]

@pateras95 public/scripts/myTool.js

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {},
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return "<div>I am a custom tool.</div>"
      }
    }),
    exporters: {
      web: function(values) {
        return "<div>I am a custom tool.</div>"
      },
      email: function(values) {
        return "<div>I am a custom tool.</div>"
      }
    },
    head: {
      css: function(values) {},
      js: function(values) {}
    }
  }
});

add types if using typescript

 type UnlayerWindow = Window & {
  unlayer: UnlayerEditor; // define it with whatever you need
};

in your component

  initEditor(): void {
    const { unlayer } = (window as unknown) as UnlayerWindow;
    this.editor = unlayer.createEditor({
      id: "editor",
      projectId: 6141,
      safeHtml: false,
      displayMode: "email",
      tools: {
        form: { enabled: false },
      },
      customJS: [`${window.location.origin}/scripts/myTool.js`],
    });

  }

[Attacler]

@pateras95 public/scripts/myTool.js

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {},
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return "<div>I am a custom tool.</div>"
      }
    }),
    exporters: {
      web: function(values) {
        return "<div>I am a custom tool.</div>"
      },
      email: function(values) {
        return "<div>I am a custom tool.</div>"
      }
    },
    head: {
      css: function(values) {},
      js: function(values) {}
    }
  }
});

add types if using typescript

type UnlayerWindow = Window & {
 unlayer: UnlayerEditor; // define it with whatever you need
};

in your component

  initEditor(): void {
    const { unlayer } = (window as unknown) as UnlayerWindow;
    this.editor = unlayer.createEditor({
      id: "editor",
      projectId: 6141,
      safeHtml: false,
      displayMode: "email",
      tools: {
        form: { enabled: false },
      },
      customJS: [`${window.location.origin}/scripts/myTool.js`],
    });

  }

doesnt that defeat the purpose of the vuejs component? createViewer method is not available here. It must be passed as customJS Im basicly getting that error, can anyone help me out?

[ozgegoseli]

@pateras95 public/scripts/myTool.js

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {},
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return "<div>I am a custom tool.</div>"
      }
    }),
    exporters: {
      web: function(values) {
        return "<div>I am a custom tool.</div>"
      },
      email: function(values) {
        return "<div>I am a custom tool.</div>"
      }
    },
    head: {
      css: function(values) {},
      js: function(values) {}
    }
  }
});

add types if using typescript

type UnlayerWindow = Window & {
 unlayer: UnlayerEditor; // define it with whatever you need
};

in your component

  initEditor(): void {
    const { unlayer } = (window as unknown) as UnlayerWindow;
    this.editor = unlayer.createEditor({
      id: "editor",
      projectId: 6141,
      safeHtml: false,
      displayMode: "email",
      tools: {
        form: { enabled: false },
      },
      customJS: [`${window.location.origin}/scripts/myTool.js`],
    });

  }

doesnt that defeat the purpose of the vuejs component? createViewer method is not available here. It must be passed as customJS Im basicly getting that error, can anyone help me out?

I can't add custom tools either When I create the custom.js file it always says unlayer is not defined

[manuel-84]

+1 not able to pass customJS to the vue EmailEditor component

at this point this can be a feature request @umairsiddique?

[ljunren]

Can you give me a demo