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

2024-05-11 • 问答

我不是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/

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

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

//......

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

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

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

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

tinymce.PluginManager.add('test_containers',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',onclick: function() {
      editor.windowManager.open({
        title: 'Test Container',body: [{
          type: 'container',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）

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

大家都在问