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

Question

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

提前致谢。

Answer 1

因为 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?

Answer 2

抱歉我来晚了。我有这个完全相同的问题。我使用了 Angular 指令，我想在 $element 上初始化 TinyMCE。原来你可以使用这个语法：

var element = getYourHTMLElementSomehow();

//...

tinymce.init({
  target: element
});

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

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

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

Add tinymce editor to element object instead of selector

javascript

tinymce

aurelia