Question

我有一个自定义元素（Aurelia equivelent of a web component），它创建了一个tinymce编辑器。无法通过使用选择器选择textarea（因为页面上可以存在任意数量的这些自定义元素）。我需要通过传递元素对象来初始化tinymce实例。有可能吗？我还没能在任何地方找到这个功能......

提前致谢。

Answer 1

对不起，我有点晚了。我有同样的问题。我使用了Angular指令，我想在$element上初始化TinyMCE。事实证明你可以使用这种语法：

var element = getYourHTMLElementSomehow();

//...

tinymce.init({
  target: element
});

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

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

Answer 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?

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

2 个答案: