尝试手动将新块添加到EditorJS时出现错误
上下文
我已经创建了一个两栏的页面，其中一栏在左边有一个按钮，editorJS在右栏。
我想要做的是每当我点击左边的按钮时，我希望它被复制到一个新的EditorJS块中。
复制
每当尝试使用editor.blocks.insert(blockToAdd)手动添加新块(在本例中，是用于向EditorJS添加更多内容的外部按钮)时，都会触发该错误。与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);
});index.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>类型的导入？否则，我不知道问题出在哪里。提前谢谢你。
回答 1
Stack Overflow用户
发布于 2021-08-27 07:11:21
所以问题出在我传递给editor.blocks.insert(blockToInsert)的对象中。
它需要一个选项一个选项地传递，而不是单个对象。因此，正确的解决方案应该是：
const blockToAdd = {
type: 'paragraph',
data: {
text: 'My header'
}
};
editor.blocks.insert(blockToAdd.type, blockToAdd.data);感谢来自JavaScript Telegram社区的Thomas帮助我解决了这个问题。
https://stackoverflow.com/questions/68946742
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号