將自定義下拉菜單添加到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並插入動態內容

回答

相關問題