Uncaught TypeError: Cannot read properties of undefined (reading 'paste')...but why?

Question

When I run the code below and click the custom toolbar button I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'paste')

I'm not sure why this is happening. Any insight?

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 () {
    tinymce.activeEditor.dom.setHTML(
      tinymce.activeEditor.dom.select('#emailBody'),
      'Name!EmployeeName!' +
        'Task Name!TaskName!' +
        'Task Description!TaskDescription!' +
        'Date Assigned!DateAssigned!' +
        'Due Date!DueDate!',
    )
  }

  editor.ui.registry.addMenuButton('tokenButton', {
    text: 'Available Tokens',
    fetch: function (callback) {
      var items = [
        {
          type: 'menuitem',
          text: 'Task Detail Template',
          onAction: function (_) {
            editor.insertContent(taskDetails())
          },
        },
      ]
      callback(items)
    },
  })
},
content_style:
  'body { font-family:Helvetica,Arial,sans-serif; font-size:1.25rem }',
})

HTML


<table>
<tbody id="emailBody"></tbody>
</table>

user_11275515 · Answer

The problem here is that you're passing undefined to the TinyMCE editor.insertContent() API when it needs to be a string. See https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

The cause of that is that your taskDetails function doesn't return anything and as such the return value is undefined. I'm not exactly sure what you're trying to do given the example and details, but you may want to change that to something like this instead: https://fiddle.tiny.cloud/WOhaab

  var taskDetails = function () {
      return 'Name!EmployeeName!' +
        'Task Name!TaskName!' +
        'Task Description!TaskDescription!' +
        'Date Assigned!DateAssigned!' +
        'Due Date!DueDate!';
  }

This way your function returns a string and will insert that into the editor where the caret currently is. If you wanted it to overwrite the content instead, then you could use the editor.setContent() API instead.

Uncaught TypeError: Cannot read properties of undefined (reading 'paste')...but why?

1 Answers