关于javascript：动态生成TinyMCE下拉菜单

javascripttinymce

Generating TinyMCE drop-down menu dynamically

我试图用从数组派生的选项在TinyMCE中创建工具栏按钮。我已经按照Tiny网站上的示例进行操作，并且该按钮已按预期生成。这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var mergeFields = {one:"first", two:"second", three:"third"};

tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'mergefields',
setup: function (editor) {
editor.ui.registry.addMenuButton('mergefields', {
text: 'Merge Fields',
fetch: function (callback) {
var items = [];
for (var fieldName in mergeFields) {
var menuItem = {
type: 'menuitem',
text: mergeFields[fieldName],
onAction: function() {
// The problem: this function always inserts the last element of the array
// instead of the expected fieldName associated with this menuItem
editor.insertContent(fieldName);
},
};
items.push(menuItem);
}
callback(items);
},
});
}
});

1
2
3

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=XXXXX">

<textarea>Editor</textarea>

选择选项之一并执行分配给onAction属性的匿名函数时会发生问题-它总是在文档中插入"三"(大概是因为在遍历整个数组之后，fieldName设置为"三")。如何使onAction处理程序将正确的值插入文档中？

这需要在TinyMCE 5中工作。

我在这里发现了一个类似的问题：向tinyMCE添加自定义下拉菜单并插入动态内容，但这是指TinyMCE 4，不幸的是，提供的答案不适用于TinyMCE 5。

谢谢你的帮助！

相关讨论

我有同样的问题。
我用value + onSetup解决了

https://jsfiddle.net/stvakis/tjh7k20v/8/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var mergeFields = {
one:"first",
two:"second",
three:"third"
};

tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: 'mergefields',
setup: function(editor) {
editor.ui.registry.addMenuButton('mergefields', {
text: 'Merge Fields',
fetch: function(callback) {
var items = [];
for (var fieldName in mergeFields) {
var menuItem = {
type: 'menuitem',
text: mergeFields[fieldName],
value:fieldName,
onSetup: function(buttonApi) {
var $this = this;
this.onAction = function() {
editor.insertContent($this.data.value);
};
},
};
items.push(menuItem);
}
callback(items);
},
});
}
});