开发智联笔记项目时所遇问题(4)
问题如图:

从图片中的错误信息可以看出,问题出现在 index.html 第209行,错误是 TypeError: %s enable_sheets to see a function。这通常与 jsmind 的初始化或节点操作有关。
问题诊断与解决方案
1. 检查控制台完整错误
首先在浏览器控制台中查看完整的错误堆栈,确定具体是哪行代码出错。
2. 修正 jsmind 初始化
修改 index.html 中的 initMind() 函数:
/* 初始化脑图 */
function initMind(data) {
try {
// 确保数据格式正确
if (!data || typeof data !== 'object') {
console.error('Invalid data format:', data);
return;
}
jm = new jsMind({
container: 'jsmind_container',
theme: 'primary',
editable: true,
view: {
hmargin: 100,
vmargin: 50,
line_width: 2,
line_color: '#409eff'
},
layout: {
hspace: 80,
vspace: 20,
pspace: 13
},
shortcut: {
enable: false // 暂时禁用快捷键,避免冲突
}
});
// 显示脑图数据
jm.show(data);
console.log('Mind map initialized successfully');
} catch (error) {
console.error('Error initializing mind map:', error);
alert('初始化脑图失败: ' + error.message);
}
}
3. 修正节点操作函数
更新所有节点操作函数,确保参数正确:
function addChild() {
if (!jm) return alert('脑图未初始化');
const node = jm.get_selected_node();
if (!node) return alert('请先选中一个节点');
try {
const newId = 'node_' + Date.now();
jm.add_node(node, newId, '新节点');
} catch (error) {
console.error('Add child error:', error);
alert('添加子节点失败: ' + error.message);
}
}
function addBro() {
if (!jm) return alert('脑图未初始化');
const node = jm.get_selected_node();
if (!node) return alert('请先选中一个节点');
if (node.isroot) return alert('不能在根节点下添加兄弟节点');
try {
const newId = 'node_' + Date.now();
jm.insert_node_after(node, newId, '兄弟节点');
} catch (error) {
console.error('Add brother error:', error);
alert('添加兄弟节点失败: ' + error.message);
}
}
function editNode() {
if (!jm) return;
const node = jm.get_selected_node();
if (!node) return;
try {
jm.begin_edit(node);
} catch (error) {
console.error('Edit node error:', error);
}
}
function delNode() {
if (!jm) return;
const node = jm.get_selected_node();
if (!node || node.isroot) return;
try {
jm.remove_node(node);
} catch (error) {
console.error('Delete node error:', error);
}
}
4. 修正创建脑图的数据结构
确保创建新脑图时使用正确的数据结构:
async function createMap() {
const name = document.getElementById('mName').value.trim();
const topic = document.getElementById('mTopic').value.trim();
if (!name || !topic) return alert('请填写完整');
// 使用 jsmind 标准格式
const data = {
"meta": {
"name": name,
"author": document.getElementById('user').textContent,
"version": "1.0"
},
"format": "node_tree",
"data": {
"id": "root",
"topic": topic,
"children": []
}
};
try {
const res = await fetch('/api/mindmaps', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name, data}),
credentials: 'include'
});
if (!res.ok) {
const error = await res.text();
throw new Error(error || '创建失败');
}
const m = await res.json();
mapList.push(m);
renderList();
closeModal();
openMap(m.id);
} catch (error) {
console.error('Create map error:', error);
alert('创建失败: ' + error.message);
}
}
5. 添加错误处理到打开脑图功能
async function openMap(id) {
try {
currentId = id;
renderList();
const res = await fetch(`/api/mindmaps/${id}`, {credentials: 'include'});
if (!res.ok) throw new Error('加载脑图失败');
const m = await res.json();
console.log('Loaded mind map data:', m);
if (jm) {
jm.show(m.data);
} else {
initMind(m.data);
}
} catch (error) {
console.error('Open map error:', error);
alert('打开脑图失败: ' + error.message);
}
}
6. 检查 jsmind 版本兼容性
如果问题仍然存在,可能是 jsmind 版本不兼容。尝试使用更稳定的版本:
# 下载指定版本的 jsmind
curl -o static/jsmind.js https://cdn.jsdelivr.net/npm/jsmind@0.4.6/js/jsmind.js
curl -o static/jsmind.css https://cdn.jsdelivr.net/npm/jsmind@0.4.6/style/jsmind.css
7. 临时解决方案
如果上述方法都不行,可以暂时注释掉有问题的代码,逐步排查:
// 暂时注释插件加载
// <script src="{{ url_for('static', filename='jsmind.draggable.js') }}"></script>
// <script src="{{ url_for('static', filename='jsmind.undo.js') }}"></script>

浙公网安备 33010602011771号