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'),
      '<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 (_) {
            editor.insertContent(taskDetails())
          },
        },
      ]
      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>

score 1 · Answer 1 · answered Oct 10 '21 at 06:29

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

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.

thanks for the tip! That helped me get some insight. What I ended up doing is not using any editor.x methods and just calling taskDetails() directly in the onAction. Because I'm not trying to just return a string but replace a string on the dom so there is an insertable template for the user. — Pinpaho, Oct 11 '21 at 12:18

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

1 Answers1