Editor.js 在 Vue 中初始化后无法输入内容是怎么回事？

诸葛柯豫提问于 2026-03-06 12:45:20 阅读 38

组件

我在 Vue 3 项目里集成 Editor.js，初始化看起来没问题，编辑器也渲染出来了，但就是点进去没法输入文字，光标都出不来。试过官方 demo 的配置，也检查了容器是否有高度，还是不行。

这是我的组件代码：

<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>

<script setup>
import EditorJS from '@editorjs/editorjs'
import { onMounted, ref } from 'vue'

const editorContainer = ref(null)

onMounted(() => {
  new EditorJS({
    holder: editorContainer.value,
    tools: {}
  })
})
</script>

我来解答赞 10 收藏

反馈

2 条解答

Dev · 雨童 Lv1

这个问题很常见，Editor.js 渲染出来了但无法输入，基本就是两个原因：

1. 容器没有高度

Editor.js 需要一个明确的高度才能正常工作。你说检查过容器高度，但很可能只是设置了 CSS 而没有在配置中指定。解决方法有两种：

在组件中加 minHeight 配置：

onMounted(() => {

  new EditorJS({

    holder: editorContainer.value,

    minHeight: 300,

    tools: {}

  })

})

或者在 CSS 里写死高度：

.editor-container {

  min-height: 300px;

}

2. tools 为空导致没有可用的块

这是另一个关键点。Editor.js 默认不会自动加载任何工具，你传了空的 tools: {}，那编辑器里就没什么能输入的。

至少要引入 Paragraph 工具：

import EditorJS from '@editorjs/editorjs'

import Paragraph from '@editorjs/paragraph'

import { onMounted, ref } from 'vue'



const editorContainer = ref(null)



onMounted(() => {

  new EditorJS({

    holder: editorContainer.value,

    minHeight: 300,

    tools: {

      paragraph: Paragraph

    }

  })

})

这两个问题加起来就是：你看到编辑器渲染出来了，但因为没有高度+没有工具，所以点不进去、输不了字。

先加上 minHeight: 300 和 Paragraph 工具试试，基本就能正常输入了。

2026-03-12 02:00

W″尚文 Lv1

我之前也遇到过，Editor.js在Vue3里要用nextTick等DOM完全渲染再初始化。改下onMounted里的代码：



onMounted(() => {

  nextTick(() => {

    new EditorJS({

      holder: editorContainer.value,

      tools: {}

    })

  })

})

记得import nextTick。另外检查下CSS，确保容器有min-height

2026-03-06 13:08