javascript - Javascript：创建一个带有参数数量的文本框（TinyMCE）的表单

Question

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

看下面的代码，我想避免复制和粘贴（问题1，问题2，...，问题[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/

标签： javascripttinymce

Answer 1

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

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);
            }
        });
        }});
    });

//......