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

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

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

//......

Answer 2

据我了解，您需要动态添加项目。

我在你的代码中添加了两个函数。

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

希望对您有所帮助:)

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

Javascript: Create a form with a parametric number of textbox (TinyMCE)

javascript

tinymce