1

语境

我创建了一个两列页面，一列左侧有一个按钮，右侧有 editorJS。

我想要做的是每当我点击左边的按钮时，我希望它被复制到一个新的 EditorJS 块中。

复制

每当尝试使用editor.blocks.insert(blockToAdd). 与 EditorJS 的配置无关，即使是最基本的配置也会触发此错误。

代码

index.js（我已经修改了这个文件以使其更短，错误总是在同一个地方触发，即

const blockToAdd = {
    type: 'paragraph', 
    data: {
      text: 'My header'
    }
  };
editor.blocks.insert(blockToAdd); // Here

实际文件

const btn = document.getElementById('export-btn')

const editor = new EditorJS({
  /**
   * Id of Element that should contain Editor instance
   */
  onReady: () => {
    new DragDrop(editor);
  },
  holder: 'editorjs',
  tools: {
    header: {
      class: Header,
      config: {
        placeholder: 'Enter a header',
        levels: [1,2,3,4],
        defaultLevel: 3
      }
    },
    paragraph: {
      class: Paragraph,
      inlineToolbar: true,
    }

  },
});

function saveEditor() {
  editor.save().then( savedData => {
    fetch('http://localhost:3000', {
      method: 'POST',
      body: JSON.stringify(savedData),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then( msg => {
      console.log(msg)
    }).catch( err => {
      console.error(err)
    })
    console.log()
  })
  .catch( err => {
    console.error(err)
  })
}

btn.addEventListener('click', function() {
  const blockToAdd = {
    type: 'paragraph', 
    data: {
      text: 'My header'
    }
  };

  editor.blocks.insert(blockToAdd);
});

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Testing EditorJS and Docx</title>
</head>
<body>
  <div class="col-left">
    <div id="export-btn" class="export-btn">Export to...</div>
  </div>
  <div class="col-right">
    <div id="editorjs"></div>
  </div>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>

 <script src="index.js"></script> 
</body>
</html>

错误

Uncaught TypeError: can't access property "name", s is undefined
    S https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest:6
    value https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest:6
    value https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest:6
    <anonymous> https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest:6
    <anonymous> file:///E:/wdev/tasktag-dashboard-ui/index.js:105
    EventListener.handleEvent* file:///E:/wdev/tasktag-dashboard-ui/index.js:97
editorjs@latest:6:44399

错误截图

问题可能出在哪里？因为我正在使用<script src="https://cdn.jsdelivr.net/npm/editorjs-drag-drop@latest"></script>某种进口商品？否则，我不知道问题是什么。先感谢您。

4

1 回答 1

0

所以问题出在我传递给editor.blocks.insert(blockToInsert).

它需要通过选项而不是单个对象传递选项。所以正确的解决方案是：

const blockToAdd = {
    type: 'paragraph', 
    data: {
      text: 'My header'
    }
  };

  editor.blocks.insert(blockToAdd.type, blockToAdd.data);

感谢来自 JavaScript Telegram 社区的Thomas帮助我解决了这个问题。

于 2021-08-27T07:11:21.173 回答