Javascript：创建带有参数化文本框数量的表单（TinyMCE）

Question

我不是Web开发人员，我只需要做一次小任务，但是我讨厌复制和粘贴。

请看下面的代码，我想避免复制和粘贴（question1，question2，...，question [i]）。我想创建一个for语句，但是我应该使用动态名称处理属性。在C＃中，我将使用反射或动态。

可以用Javascript吗？这是正确的方法吗？我应该动态生成代码并使用Eval（）吗？

tinymce.PluginManager.add('test_containers', function(editor, url) {
  editor.addButton('test_containers2', {
    title: 'Container 2',
    text: 'Container 2',
    onclick: function() {
      editor.windowManager.open({
        title: 'Test Container',
        body: [{
          type: 'container',
          layout: 'stack',
          columns: 2,
          minWidth: 500,
          minHeight: 500,
          items: [{
            type: 'textbox',
            name: 'question1'
          }, {
            type: 'textbox',
            name: 'question2'
          }, ]
        }],
        onsubmit: function(e) {
          ed.insertContent(e.data.question1 + e.data.question2);
        }
      });
    }
  });
});

tinymce.init({
  selector: '#mytextarea',
  plugins: 'colorpicker  test_containers',
  toolbar: 'test_containers2'
});

// Taken from core plugins
var editor = tinymce.activeEditor;

function createColorPickAction() {
  var colorPickerCallback = editor.settings.color_picker_callback;

  if (colorPickerCallback) {
    return function() {
      var self = this;

      colorPickerCallback.call(
        editor,
        function(value) {
          self.value(value).fire('change');
        },
        self.value()
      );
    };
  }
}

<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea id="mytextarea">Hello, World!</textarea>

参见：https://jsfiddle.net/Revious/gm2phuva/3/

Answer 1

据我所知，您需要动态添加项目。

我在您的代码上添加了两个功能。

createArr->将创建指定编号（n）的列表数组

[handleQuesData->将合并所有问题的数据并将其传递给onsubmit函数

tinymce.PluginManager.add('test_containers', function(editor, url) {
	// item creation dynamically
  let createArr = (n) => {
    let arr = []
    for (let i = 0; i < n; i++) {
      arr.push({
        type: 'textbox',
        name: `question{i+1}`
      })
    }
    return arr;
  }
	// onsubmit handled dynamically
  let handleQuesData = (data, n) => {
    let quesdata = ''
    for (let i = 0; i < n; i++) {
      quesdata += data[`question{i+1}`]
    }
    return quesdata
  }
	
  let numItem = 2;
  editor.addButton('test_containers2', {
    title: 'Container 2',
    text: 'Container 2',
    onclick: function() {
      editor.windowManager.open({
        title: 'Test Container',
        body: [{
          type: 'container',
          layout: 'stack',
          columns: 2,
          minWidth: 500,
          minHeight: 500,
          items: createArr(numItem)
        }],
        onsubmit: function(e) {
          ed.insertContent(handleQuesData(e.data, numItem));
        }
      });
    }
  });
});

tinymce.init({
  selector: '#mytextarea',
  plugins: 'colorpicker  test_containers',
  toolbar: 'test_containers2'
});


// Taken from core plugins
var editor = tinymce.activeEditor;

function createColorPickAction() {
  var colorPickerCallback = editor.settings.color_picker_callback;

  if (colorPickerCallback) {
    return function() {
      var self = this;

      colorPickerCallback.call(
        editor,
        function(value) {
          self.value(value).fire('change');
        },
        self.value()
      );
    };
  }
}

这里是演示代码：JSFiddle

希望有帮助：）

Answer 2

是，您可以动态生成项目列表。

tinymce.PluginManager.add('test_containers', function(editor, url) {

    const totalQuestions = 10;
    let questions = [];
    for (let i = 1; i < totalQuestions; i++) {
        questions.push({
            type: 'textbox',
            name: 'question' + i
        });
    }

    editor.addButton('test_containers2', {
        title: 'Container 2',
        text: 'Container 2',
        onclick: function() {
        editor.windowManager.open({
            title: 'Test Container',
            body: [{
                type: 'container',
                layout: 'stack',
                columns: 2,
                minWidth: 500,
                minHeight: 500,
                items: questions
            }],
            onsubmit: function(e) {
            ed.insertContent(e.data.question1 + e.data.question2);
            }
        });
        }});
    });

//......