[提问]如何通过模拟输入的方式在wangeditor中插入图片

Question

类似：

function fill(textarea, text) {
//textarea是wangeditor富文本区域, text是文字
    var e = new InputEvent('beforeinput', {
        inputType: 'insertText',
        data: text
    })
    textarea.dispatchEvent(e)
}

如果需要插入图片的话 应该怎么做

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

问题分析：
你想要在wangeditor中通过模拟输入的方式插入图片。根据你提供的代码，你已经实现了在wangeditor中插入文字的函数fill。现在我们需要修改这个函数，使其能够插入图片。

解决方案：
以下是实现该功能的步骤和代码示例：

1.获取文件上传的input元素：你需要先在HTML中加入一个input元素，用于文件上传。你可以使用 <input type="file">来获得用户选择的图片文件。

<input type="file" id="fileInput">

2.修改fill函数：你需要修改fill函数的逻辑，使其能够根据用户选择的图片文件添加图片到wangeditor中。

function fill(textarea, text, imgFile) {
  // 创建一个range对象
  var range = document.createRange();
  range.selectNodeContents(textarea);

  // 将range对象添加到selection对象中
  var selection = document.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // 插入文字
  var e = new InputEvent('beforeinput', {
    inputType: 'insertText',
    data: text
  });
  textarea.dispatchEvent(e);

  // 插入图片
  if (imgFile) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;

      // 创建一个新的range对象
      var newRange = document.createRange();
      newRange.selectNodeContents(textarea);

      // 获取当前range的结束位置
      newRange.setStart(selection.focusNode, selection.focusOffset);
      newRange.collapse(true);

      // 在range的结束位置插入图片
      newRange.insertNode(img);

      // 重置selection对象
      selection.removeAllRanges();
      selection.addRange(newRange);
    };
    reader.readAsDataURL(imgFile);
  }
}

3.监听文件选择事件：你需要为文件上传的input元素添加一个监听函数，以便获得用户选择的图片文件。

var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
  var file = fileInput.files[0];
  fill(textarea, '', file);
});

这样，当用户选择图片文件后，就会自动将图片插入到wangeditor中。请注意，上述代码中的textarea参数应该是wangeditor的富文本区域的引用。

希望以上解决方案对你有帮助！如果你还有其他问题，请随时提问。