如何在Nuxt3中正确使用toast-ui Editor组件？

算力阿峰

2026-7-8

Nuxt3 集成 Toast UI Editor 解决指南

一、解决直接导入触发的 `self is not defined` 错误

问题原因

Toast UI Editor 依赖浏览器环境的 self 对象，而 Nuxt3 默认会在服务端预渲染组件，导致服务端运行时找不到该对象。

解决步骤

用 client-only 包裹编辑器容器，确保组件仅在客户端渲染：

<template>
  <client-only>
    <div ref="editorContainer"></div>
  </client-only>
</template>

在 onMounted 钩子中动态导入并实例化，因为 onMounted 仅在客户端执行：

<script setup>
import { ref, onMounted } from 'vue'
const editorContainer = ref(null)
let editor = null

onMounted(async () => {
  // 动态导入编辑器核心库
  const { Editor } = await import('@toast-ui/editor')
  // 导入编辑器样式
  import('@toast-ui/editor/dist/toastui-editor.css')

  // 实例化编辑器
  editor = new Editor({
    el: editorContainer.value,
    initialEditType: 'markdown',
    initialValue: 'Hello World!'
  })
})
</script>

二、插件注册后如何作为组件使用

1. 完善插件文件 `plugins/tui-editor.client.ts`

将 Editor 挂载到 Nuxt 应用的全局提供对象中：

import { defineNuxtPlugin } from '#app'
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('tuiEditor', Editor)
})

2. 在 `DetailArea.client.vue` 中使用全局编辑器实例

<template>
  <div ref="editorEl"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 获取全局提供的编辑器构造函数
const { $tuiEditor } = useNuxtApp()
const editorEl = ref(null)
let editorInstance = null

onMounted(() => {
  editorInstance = new $tuiEditor({
    el: editorEl.value,
    initialEditType: 'wysiwyg',
    initialValue: '通过插件注册的编辑器'
  })
})
</script>