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.

We can't begin to help you without examples of the DOM structures you're working with. Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) — T.J. Crowder, Jun 08 '16 at 17:31
*"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)"* That's a non sequitur. Having multiple instances of an element on the page does not make it impossible to select via a selector. — T.J. Crowder, Jun 08 '16 at 17:31
@T.J.Crowder not multiple instances of an element, multiple instances of this custom-element, meaning that the custom-element creates a new tinymce every time it is added to the page. It has no knowledge of anything outside of itself (meaning that it cannot generate a unique id every time it is instantiated). — pQuestions123, Jun 08 '16 at 17:36
@T.J.Crowder I purposely did not add html and javascript because that will significantly muddy the issue (bunch of Aurelia specific code). The question is pretty general, basically if a web component uses tinymce inside of itself, it needs a way to guarantee that it will only apply it to the textarea inside of itself, cant use a selector for that. — pQuestions123, Jun 08 '16 at 17:38
I've added the [tag:aurelia] tag, as this appears to be specific to Aurelia. You really need to provide much more information, ideally a [mcve] (a small one should be possible) if you want to get a good answer to this question. — T.J. Crowder, Jun 08 '16 at 17:40

score 32 · Accepted Answer · answered Jul 12 '16 at 20:36

32

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.

answered Jul 12 '16 at 20:36

jens1101

567
7
12

1

That is exactly what I've been looking for. And I've been looking for such piece of code for days already. It's really hard to believe this answer resides here basically unnoticed as it's nearly a life saver which should definitely be included in the docs. AND be marked as a real answer for the question. Thank you @jens1101, you're my hero. – Tomalla Jul 21 '16 at 13:24
@Tomalla Thanks, and my pleasure :-) – jens1101 Jul 21 '16 at 13:42

score 2 · Answer 2 · edited May 23 '17 at 12:26

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?

Note that I changed `activate` to `attached` b/c I constantly get that callback name wrong. `attached` is the callback you want. — Ashley Grant, Jun 08 '16 at 20:33

Add tinymce editor to element object instead of selector

2 Answers2