将 tinymce 编辑器添加到元素对象而不是选择器答案

【问题标题】：Add tinymce editor to element object instead of selector将 tinymce 编辑器添加到元素对象而不是选择器
【发布时间】：2016-06-08 17:28:00
【问题描述】：

我有一个创建 tinymce 编辑器的自定义元素（Aurelia 等效于 Web 组件）。无法使用选择器选择文本区域（因为页面上可以存在任意数量的这些自定义元素）。我需要一些方法来初始化 tinymce 实例，方法是向它传递元素对象。有这种可能吗？我无法在任何地方找到此功能...

提前致谢。

【问题讨论】：

如果没有您正在使用的 DOM 结构的示例，我们就无法开始帮助您。请带上tour，环顾四周，通读help center，尤其是How do I ask a good question?
“没有办法通过使用选择器来选择文本区域（因为页面上可以存在任意数量的这些自定义元素）” 这是不合逻辑的。页面上有多个元素实例并不意味着无法通过选择器进行选择。
@T.J.Crowder 不是一个元素的多个实例，而是这个自定义元素的多个实例，这意味着自定义元素每次添加到页面时都会创建一个新的 tinymce。它对自身之外的任何事物一无所知（这意味着它每次实例化时都无法生成唯一的 id）。
@T.J.Crowder 我故意没有添加 html 和 javascript，因为这会严重混淆问题（一堆 Aurelia 特定代码）。这个问题很笼统，基本上如果一个 web 组件在自身内部使用 tinymce，它需要一种方法来保证它只会将其应用于自身内部的 textarea，不能为此使用选择器。
我添加了 aurelia 标签，因为这似乎是 Aurelia 特有的。如果你想得到这个问题的好答案，你真的需要提供更多信息，最好是minimal reproducible example（应该可以提供一个小信息）。

标签： javascript tinymce aurelia

【解决方案1】：

对不起，我来晚了。我有这个完全相同的问题。我使用了 Angular 指令，我想在 $element 上初始化 TinyMCE。事实证明，您可以使用以下语法：

var element = getYourHTMLElementSomehow();

//...

tinymce.init({
  target: element
});

所以你根本不使用selector，而是使用target。

我不得不查看源代码，因为它似乎没有在任何地方明确记录。

【讨论】：

这正是我一直在寻找的。几天来我一直在寻找这样的代码。真的很难相信这个答案在这里基本上被忽视了，因为它几乎是一个救生员，绝对应该包含在文档中。并被标记为问题的真实答案。谢谢@jens1101，你是我的英雄。
@Tomalla 谢谢，我很高兴 :-)

【解决方案2】：

由于 TinyMCE 似乎要求您使用选择器并且不允许您简单地传递元素实例（根据他的论坛回复，开发人员似乎没有掌握此用例的实用性），您的最好的办法是做这样的事情：

查看

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

视图模型

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);
  });
}

我的 UUID 函数来自这里：Create GUID / UUID in JavaScript?

【讨论】：

请注意，我将 activate 更改为 attached b/c 我经常弄错回调名称。 attached 是你想要的回调。