引入editor.md编辑器报错Zepto not defined的问题咨询
报错原因
Zepto is not defined和$ is not defined两个报错的核心原因一致:editor.md依赖jQuery/Zepto作为基础运行库,你的代码中没有提前引入该依赖,editor.md内部找不到Zepto就会尝试找jQuery,两者都缺失就会抛出第一个错误;后续你自定义的初始化代码用了jQuery的$()语法,自然也会报$未定义的错误。- editor.md是纯前端组件,不需要将项目作为Node.js应用运行,只要静态资源路径正确,普通静态HTTP服务甚至直接打开本地HTML文件都可以正常运行。
解决方法
- 先获取jQuery库,你可以自行下载jQuery放到项目静态资源目录,也可以直接使用editor.md发布包中自带的jQuery文件(通常在lib目录下)。
- 调整资源加载顺序,必须保证jQuery在editormd.js之前加载,正确的代码结构参考如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>editorMD Test</title> <link rel="stylesheet" href="scripts/editor/editor.md-master/css/editormd.css"> <!-- 补充设置body和html高度,避免100%高度的编辑器不显示 --> <style> html,body { margin: 0; padding: 0; height: 100%; } </style> </head> <body> <div id="test-editor"> <textarea style="display:none;">### Editor.md **Editor.md**: The open source embeddable online markdown editor, based on CodeMirror & jQuery & Marked. </textarea> </div> <!-- 先引入jQuery,注意替换为你实际的jQuery路径 --> <script src="scripts/editor/editor.md-master/lib/jquery.min.js"></script> <!-- 再引入editormd.js --> <script src="scripts/editor/editor.md-master/editormd.js"></script> <script> $(function(){ let editor = editormd("#test-editor", { width : "100%", height : "100%", path : "scripts/editor/editor.md-master/lib/" }); }); </script> </body> </html>
- 完成上述修改后刷新页面即可正常加载编辑器。
内容的提问来源于stack exchange,提问作者Dominik Lovetinsky
相关产品推荐
相关产品推荐

