javascript - 在一页中实现多个带有自定义按钮的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 Fiddle:https://jsfiddle.net/j1fmLc40/