Add tinymce editor to element object instead of selector

Question

I have a custom-element (Aurelia equivelent of a web component) that creates a tinymce editor. There is no way to select the textarea by using a selector (because there can exist any number of these custom-elements on a page). I need some way of initializing the tinymce instance by passing it the element object. Is there such a possibility? I haven't been able to find this functionality anywhere...

Thanks in advance.

Answer 1

Sorry that I'm a bit late. I had this exact same problem. I used an Angular directive, and I wanted to initialize TinyMCE on $element. It turns out you can use this syntax:

var element = getYourHTMLElementSomehow();

//...

tinymce.init({
  target: element
});

So you don't use selector at all, and instead use target.

I had to look in the source code for this, because it doesn't seem to be explicitly documented anywhere.

Answer 2

Since TinyMCE seems to require you to use a selector and won't let you simply pass an element instance (and the developer doesn't seem to grasp the utility of this use-case, based on his forum responses), your best bet 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?