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

我已经添加了一些代码来将下拉菜单添加到TinyMCE, ，因为您可以运行它的效果很好的代码片段，但是在将内容插入编辑器时出现问题。将自定义下拉菜单添加到tinyMCE并插入动态内容

tempGroups和临时变量将在后台创建因此它是不可能静态地使用它们。所以我编写了下面的代码，将每个项目的内容插入到编辑器中以选择每个项目。

但问题是选择任何项目，它插入最后含量值：

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

来源

2016-03-04 SalmanShariati

你的问题是，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

来源

2016-03-04 22:00:17

非常感谢您的详细回答，这正是我一直在寻找。 – SalmanShariati

感谢您的解决方案。除此之外，我还需要一个帮助。如何在下拉菜单中添加复选框？提前致谢。 –

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

回答

相关问题