在一頁中使用自定義按鈕實現多個TinyMCE編輯器

Question

我正在嘗試創建一個JS庫，該庫將data-tiny =“ TinyMCE”屬性的所有textarea標記修改為TinyMCE編輯器。 textarea標簽的數量是不可預測的。

自定義按鈕將被添加到所有編輯器中，並且除一件事外，一切都在執行中正常進行。

問題：

自定義按鈕單擊事件，無論單擊哪個編輯器的按鈕，都將內容添加到最后一個編輯器。

我在這里附加了jsFiddle ，並且該問題已在js的第37和38行中進行了評論

這是代碼：

var tinySelector = "textarea[data-tiny='TinyMCE']";
var tempGroupName;
var menuItems = [];
var tempGroups = ['Test Group'];
var temp = [{
  group: 'Test Group',
  css: '.test {color:red;}',
  title: 'Test Title',
  content: '<div class="test"> hi! </div>'
}];
var tinyContentCSS = "";

var tinys;
var direction = "ltr";

// Get all textarea elements which must be converted to a TinyMCE Editor
try {
  tinys = $("textarea[data-tiny='TinyMCE']").get();
} catch (e) {};

// This function creates a multilevel custom menu and adds it to the Editor
function createTempMenu(editor, editorIndex) {
  var k = 0;
  for (i = 0; i < tempGroups.length; i++) {
    var tempArray = [];
    tempArray[i] = [];
    tempGroupName = tempGroups[i];
    for (j = 0; j < temp.length; j++) {
      k++;
      if (temp[j].group == tempGroupName) {
        tempArray[i].push({
          editor: editor,
          text: temp[j].title,
          content: temp[j].content,
          css: temp[j].css,
          onclick: function() {
            this.settings.editor.insertContent(this.settings.content); // THE PROBLEM
            iframe_id = tinymce.editor.id + '_ifr'; // THE PROBLEM
            // adding styles to the head of the editor
            css_code = this.settings.css;
            with(document.getElementById(iframe_id).contentWindow) {
              var h = document.getElementsByTagName("head");
              if (!h.length) {
                if (DEBUG) console.log('length of h is null');
                return;
              }
              var newStyleSheet = document.createElement("style");
              newStyleSheet.type = "text/css";
              h[0].appendChild(newStyleSheet);
              try {
                if (typeof newStyleSheet.styleSheet !== "undefined") {
                  newStyleSheet.styleSheet.cssText = css_code;
                } else {
                  newStyleSheet.appendChild(document.createTextNode(css_code));
                  newStyleSheet.innerHTML = css_code;
                }
              } catch (err) {
                console.log(err.message);
              }
            }
          }
        });
      }
    }
    menuItems[i] = {
      text: tempGroupName,
      menu: tempArray[i]
    };
  }
  console.log(menuItems);
  return menuItems;
}

// This function gets an element and initialize it as a TinyMCE Editor
function initTinyDefault(strTinySelector, strTinyDir, editorIndex) {
  tinymce.init({
    language: 'en',
    selector: strTinySelector,
    theme: "modern",
    valid_elements: '*[*]',
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen",
      "insertdatetime media nonbreaking save table contextmenu directionality",
      "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | ltr rtl | UseTemplates",
    image_advtab: true,
    directionality: strTinyDir,
    paste_data_images: true,
    setup: function(editor) {
      editor.addButton('UseTemplates', {
        type: 'menubutton',
        text: 'Test Button',
        icon: false,
        menu: createTempMenu(editor, editorIndex)
      });
    },
    //content_css: tinyContentCSS,
  });
}


// Run the initialization function on the selected textarea elements one by one
for (i = 0; i < tinys.length; i++) {
  var str = $(tinys[i]).attr('data-tiny-id');
  $(tinySelector + "[data-tiny-id='" + str + "']").val(i);
  initTinyDefault(tinySelector + "[data-tiny-id='" + str + "']", direction, i);
}

任何幫助，將不勝感激。

Answer 1

TinyMCE在頁面上保留所有TinyMCE實例的數組。 嘗試這樣的事情：

tinymce.get(tinymce.editors.length-1).setContent();

數組（根據我的測試）按照您在頁面中對其進行初始化的順序將編輯器添加到數組中，因此初始化的“最后一個”編輯器應始終是能夠滿足以下要求的編輯器：

tinymce.get(tinymce.editors.length-1)

看到這個修改過的JS小提琴： https : //jsfiddle.net/j1fmLc40/