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

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

在此先感谢。

来源

2016-06-08 pQuestions123

如果没有您正在使用的DOM结构的示例，我们无法开始帮助您。请[参观]，环顾四周，并仔细阅读[帮助]，尤其是[*我如何提出一个好问题？]（/ help /如何问） –

*“没有通过使用选择器来选择textarea的方法（因为在页面上可以存在任意数量的这些自定义元素）“*这是不合适的。在页面上具有多个元素实例并不能通过选择器进行选择。 –

@ T.J.Crowder不是元素的多个实例，这个自定义元素的多个实例，这意味着自定义元素每次添加到页面时都会创建一个新的tinymce。它不知道任何超出自身范围的任何东西（也就是说，它在每次实例化时都不会生成唯一的ID）。 – pQuestions123

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

var element = getYourHTMLElementSomehow(); 

//... 

tinymce.init({ 
    target: element 
});

所以你不使用selector可言，而是使用target。

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

来源

2016-07-12 20:36:21 jens1101

这正是我一直在寻找的。我一直在寻找这样的代码块已经有好几天了。真的很难相信这个答案在这里基本没有被注意到，因为它几乎是一个应该包含在文档中的救星。并被标记为该问题的真实答案。谢谢@ jens1101，你是我的英雄。 – Tomalla

@Tomalla谢谢，我的荣幸:-) – jens1101

由于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?

来源

2016-06-08 20:30:13

请注意，我已将'activate'更改为'attach' b/c我经常将该回调名称错误。 'attach'是你想要的回调。 –

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

回答

相关问题