将自定义下拉菜单添加到tinyMCE并插入动态内容 [英] Adding custom dropdown menu to tinyMCE and insert dynamic contents

问题描述

我添加了一些代码，以在 TinyMCE 中添加下拉菜单， 您可以运行该代码段，效果很好，但是将内容插入到编辑器中会出现问题.

I've added some codes to add a dropdown menu to TinyMCE , as you can run the snippet it works great, but there is a problem in inserting the content into the editor.

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

tempGroups and temp variables would be created in the back-end so it is impossible to use them statically. So I wrote the code below to insert content of each item into editor on selecting each item.

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

But the problem is with selecting any item, it inserts the last content value :

<p>Content44</p>

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

for simplification I've changed the inserting method with an alert.

任何帮助将不胜感激.

Any help would be appreciated.

 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>

推荐答案

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

Your issue is that cc is not what you think it is based on variable scope and how closures work in JavaScript. Luckily there is an easy way to avoid the joy of scope and closure for this issue - custom properties on buttons and toolbar items.

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

When you create each option to put in the array you can create custom properties for the JavaScript object. In the code below note how I create a custom content property on the object that is pushed onto the array? I can then use this.settings.<propname> to get that property when the option is selected.

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

In my testing this resolved the issue - here is a TinyMCE Fiddle that shows this in action: http://fiddle.tinymce.com/Pqfaab

这篇关于将自定义下拉菜单添加到tinyMCE并插入动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！