Is it possible to build into web component?

[sitawit]

I use TinyMCE Vue and build into an app successfully. But I can't build into a web component.

I mean : https://cli.vuejs.org/guide/build-targets.html#web-component

Is it possible to do? or I make some mistake I don't realize.

Thanks.

[SimonFc]

Hi, While I don't have an answer to your question I wanted to let you know that using TinyMCE together with Web Components is actually something we the maintainers of Tiny are going to investigate and possibly implement in the near future (there are some known issues with using shadow dom and Tiny).

If not someone else can do so before I would hopefully be able to give a definite answer in the near future!

[jscasca]

Hi @sitawit

Just wanted to check if you were able to build you app into a web-component?

I'm going to close this due to lack of activity but feel free to open it if you want to go over details of this issue

[damms005]

@jscasca Please the issue is still persisting. Can you please re-open this issue so it can be tracked?

When using vue-cli, and tinymce-vue added to the app, it works perfectly. However, when built as web component using ... --target wc it simply breaks and no tinymce editor is displayed

[jscasca]

Hey @damms005

I'm happy to reopen the issue. Can you share a repo or example project where we can replicate this issue? That just helps move things forward a bit faster but I'll take a look at it anyway.

[damms005]

@jscasca here you go: https://github.com/damms005/vue-email-personaliser/tree/20737a1605caf9077802b4cf2f0b173b0516cbe6

[yi-yang-github]

Yes, it is possible with TinyMCE (the raw library), but not with this tinymce-vue.

I spent a really long time investigating this issue and finally found some working code demos how to init TinyMCE into a node attached on Shadow DOM / Shadow Root.

Basically at this moment, TinyMCE is working with Shadow Dom, if "inline" mode is false (which is the default), meaning it runs as an iframe.

This https://github.com/tinymce/tinymce/issues/6158 provided some examples: https://jsfiddle.net/vitaldo/jsdm7ao9/16/

Basically when you call tinymce.init({...,

• if you use selector: <id> then it cannot select the element by ID, if it's in shadow dom.
• but, now it's possible to use target: <el> where you can directly pass the element to the init function. In case of Vue, I used

<template>
      <textarea ref="editor$" >Hello, World!</textarea>
</template>
<script>
...
      tinymce.init({
            target: this.$refs.editor$,
...

and it works.

However, this library is hard coded to use select instead of target , see https://github.com/tinymce/tinymce-vue/blob/main/src/main/ts/components/Editor.ts#L54 , which is why it's not working.

[exalate-issue-sync[bot]]

Ref: INT-3004