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

风潇，逸然

于 2021-08-28 12:16:39 发布

阅读量850

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css vue.js html

本文链接：https://blog.youkuaiyun.com/COMMANDonly/article/details/119966446

vue 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先给出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>