点击TinyMCE自定义工具栏按钮触发Uncaught TypeError: Cannot read properties of undefined (reading 'paste')错误的原因排查

这个错误的根源在于你的代码里几个关键的问题，我来一步步拆解并修复：

问题分析 #

1. taskDetails函数无返回值，导致insertContent传入undefined
   你在调用editor.insertContent(taskDetails())时，taskDetails函数没有任何return语句，所以它的返回值是undefined。当TinyMCE尝试插入undefined内容时，内部的粘贴处理逻辑会因为找不到有效内容而抛出这个错误。

2. 依赖tinymce.activeEditor不可靠
   使用全局的activeEditor可能会出现当前激活的编辑器不是你目标的taskEmail编辑器的情况，应该直接使用setup函数提供的editor实例，这样更安全。

3. dom.select返回数组，直接传入setHTML会出错
   dom.select('#emailBody')返回的是匹配选择器的DOM元素数组，而dom.setHTML需要单个DOM元素。如果数组为空（比如元素没找到），就会传入undefined，进一步触发错误。

4. 不必要的HTML转义
   你在setHTML里传入的是转义后的字符串（比如<tr>），这会被当成纯文本插入，而不是解析为HTML元素，这显然不符合你的需求。

修复后的代码 #

JS代码 #

tinymce.init({
 selector: 'textarea#taskEmail',
 height: 550,
 menubar: false,
 plugins: 'table link',
 toolbar: 'tokenButton | tableinsertrowbefore tableinsertrowafter tabledeleterow | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link anchor',
 setup: function (editor) {
  var taskDetails = function () {
   // 直接返回要插入的HTML字符串，或者找到目标元素后设置内容
   return '<tr><td style="width:30%">Name</td><td style="width:70%">!EmployeeName!</td></tr>' +
          '<tr><td style="width:30%">Task Name</td><td style="width:70%">!TaskName!</td></tr>' +
          '<tr><td style="width:30%">Task Description</td><td style="width:70%">!TaskDescription!</td></tr>' +
          '<tr><td style="width:30%">Date Assigned</td><td style="width:70%">!DateAssigned!</td></tr>' +
          '<tr><td style="width:30%">Due Date</td><td style="width:70%">!DueDate!</td></tr>';
  }

  editor.ui.registry.addMenuButton('tokenButton', {
   text: 'Available Tokens',
   fetch: function (callback) {
    var items = [
     {
      type: 'menuitem',
      text: 'Task Detail Template',
      onAction: function (_) {
       // 找到目标tbody元素
       var emailBody = editor.dom.select('#emailBody')[0];
       if (emailBody) {
        // 直接设置目标元素的HTML
        editor.dom.setHTML(emailBody, taskDetails());
       } else {
        // 如果没找到，就直接插入内容到编辑器光标位置
        editor.insertContent('<table><tbody>' + taskDetails() + '</tbody></table>');
       }
      },
     },
    ];
    callback(items);
   },
  });
 },
 content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:1.25rem }',
})

HTML代码 #

<script src="https://cdn.tiny.cloud/1/KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<textarea id="taskEmail">
 <table>
  <tbody id="emailBody"></tbody>
 </table>
</textarea>

关键修复点说明 #

• 让taskDetails返回HTML字符串，这样我们可以灵活使用它：要么插入到目标tbody，要么在找不到tbody时直接插入到编辑器。
• 使用editor实例代替tinymce.activeEditor，确保操作的是当前初始化的编辑器。
• 处理dom.select返回的数组，取第一个元素并做存在性检查，避免传入undefined给setHTML。
• 移除不必要的HTML转义，让TinyMCE正确解析HTML元素。

这样修改后，点击自定义按钮时就能正确插入任务详情模板，不会再触发那个paste相关的错误了。

内容的提问来源于stack exchange，提问作者Pinpaho