Is it possible to build into web component?

sitawit commented 5 years ago

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 commented 5 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

yi-yang-github commented 1 year ago

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] commented 1 year ago

Ref: INT-3004

tiny-stale-bot commented 6 days ago

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

tinymce / tinymce-vue

Is it possible to build into web component? #81