Add tinymce editor to element object instead of selector

Question

I have a custom element (Aurelia equivelent web component) that creates the tinymce editor. It is not possible to select a text field using a selector (because any number of these custom elements can exist on a page). I need to somehow initialize the tinymce instance by passing it the element element. Is there such an opportunity? I could not find this functionality anywhere ...

Thanks in advance.

Answer 1

Sorry I'm a little late. I had the same problem. I used the Angular directive and I wanted to initialize TinyMCE to $element . Turns out you can use this syntax:

 var element = getYourHTMLElementSomehow(); //... tinymce.init({ target: element }); 

This way you are not using selector at all, but using target instead.

I had to look for the source code for this because it seems to be not documented anywhere.

Answer 2

Since TinyMCE seems to require you to use a selector and will not allow you to simply pass an instance of the element (and the developer does not seem to understand the usefulness of this use case based on its answers in the forum), your best thing would be to do something like this:

View

 <template> <textarea id.one-time="uniqueId" ...other bindings go here...></textarea> </template> 

ViewModel

 export class TinyMceCustomElement { constructor() { this.uniqueId = generateUUID(); } attached() { tinymce.init({ selector: `#${this.uniqueId}`, inline: true, menubar: false, toolbar: 'undo redo' }); } } function generateUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); return v.toString(16); }); } 

My UUID function comes from here: Create GUID / UUID in JavaScript?