toast-ui/editor 报错 undefined value或者innerhtml=null解决

解决Markdown编辑器初始化错误

最新推荐文章于 2025-11-27 02:34:56 发布

原创最新推荐文章于 2025-11-27 02:34:56 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #html

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在使用npm包@toast-ui/editor时遇到的初始化错误，该错误由于浏览器解析顺序导致。解决方法是在编辑器初始化代码外层包裹window.onload，确保DOM加载完毕后再执行初始化。示例代码展示了如何在Vue环境中正确引入和使用编辑器。

先给出npm官网地址
https://www.npmjs.com/package/@toast-ui/editor
无论你用cdn还是vue都会爆这种错，这是因为markdown插件其浏览器解析顺序导致的，废话不多说，给出解决办法
在你的初始化方法外面套一层window.onload即可

<template>
  <body>
    <div id="editor">123213</div>
  </body>
</template>

<script>
import 'codemirror/lib/codemirror.css' // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css'
import Editor from "@toast-ui/editor"; // Editor's Style

window.onload = ()=>{
  const editor = new Editor({
    el: document.querySelector('#editor'),
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical'
  });

  editor.getMarkdown();
}
export default {
  name: "Edit"
}
</script>