将自定义下拉菜单添加到tinyMCE并插入动态内容

Question

我已经添加了一些代码来向TinyMCE添加一个下拉菜单，因为您可以运行该代码段，效果很好，但是将内容插入到编辑器中存在问题。

tempGroups和temp变量将在后端创建，因此无法静态使用它们。 因此，我编写了以下代码，以在选择每个项目时将每个项目的内容插入编辑器。

但是问题在于选择任何项目，它会插入最后一个内容值：

<p>Content44</p>

为简化起见，我更改了带有警报的插入方法。

任何帮助，将不胜感激。

  var tempGroups = ['Group1', 'Group2', 'Group3', 'Group4']; var temp = [{ group: 'Group1', title: 'Title1', content: '<p>Content1</p>' }, { group: 'Group1', title: 'Title1-1', content: '<p>Content11</p>' }, { group: 'Group2', title: 'Title2', content: '<p>Content2</p>' }, { group: 'Group2', title: 'Title2-1', content: '<p>Content22</p>' }, { group: 'Group3', title: 'Title3-1', content: '<p>Content33</p>' }, { group: 'Group4', title: 'Title4', content: '<p>Content4</p>' }, { group: 'Group4', title: 'Title4-1', content: '<p>Content44</p>' }]; var tempGroupName; var menuItems = []; function createTempMenu(editor) { for (i = 0; i < tempGroups.length; i++) { var tempArray = []; tempArray[i] = []; tempGroupName = tempGroups[i]; for (j = 0; j < temp.length; j++) { if (temp[j].group == tempGroupName) { // ###################################################### // The problem is here var cc = temp[j].content; tempArray[i].push({ text: temp[j].title, onclick: function() { alert(cc); } }); // ###################################################### } } menuItems[i] = { text: tempGroupName, menu: tempArray[i] }; } return menuItems; } tinymce.init({ selector: "textarea", toolbar1: "UseTemplates ", setup: function(editor) { editor.addButton('UseTemplates', { type: 'menubutton', text: 'usetemplates', icon: false, menu: createTempMenu(editor) }); } }); tinyInit(); 

 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <textarea>Editor</textarea> 

Answer 1

您的问题是cc不是您认为的基于可变范围以及闭包在JavaScript中的工作方式。 幸运的是，有一种简便的方法可以避免出现此问题的范围和关闭乐趣-按钮和工具栏项上的自定义属性。

创建要放入数组的每个选项时，可以为JavaScript对象创建自定义属性。 在下面的代码中，请注意如何在推送到数组的对象上创建自定义content属性？ 然后，当选择该选项时，我可以使用this.settings.<propname>获取该属性。

// ######################################################
     // The problem is here
     //JavaScript scope/closure issue - cc is not what you think it is!
     //var cc = temp[j].content;
     tempArray[i].push({
       text: temp[j].title,
       content: temp[j].content,   //This is a custom property on the object!
       onclick: function() {
         alert(this.settings.content);
       }
     });
     // ###################################################### 

在我的测试中，此问题得以解决-这是一个TinyMCE提琴，该提琴正在运行： http : //fiddle.tinymce.com/Pqfaab