vue3中使用editor.js

第一步安装依赖

npm i @editorjs/editorjs --save

第二步创建editor.vue插件

创建i18n翻译文件   i18n.json

{
  "ui": {
    "blockTunes": {
      "toggler": {
        "Click to tune": "点击调整",
        "or drag to move": "或者拖动移动"
      }
    },
    "inlineToolbar": {
      "converter": {
        "Convert to": "转换为"
      }
    },
    "toolbar": {
      "toolbox": {
        "Add": "添加"
      }
    }
  },
  "toolNames": {
    "Text": "文本",
    "Heading": "标题",
    "List": "列表",
    "Warning": "警告",
    "Checklist": "清单",
    "Quote": "引用",
    "Code": "代码",
    "Delimiter": "分隔符",
    "Raw HTML": "原始HTML",
    "Table": "表格",
    "Link": "链接",
    "Marker": "标记",
    "Bold": "加粗",
    "Italic": "斜体",
    "Image": "图片"
  },
  "tools": {
    "warning": {
      "Title": "标题",
      "Message": "消息"
    },
    "link": {
      "Add a link": "添加链接"
    },
    "stub": {
      "The block can not be displayed correctly.": "该块不能正确显示"
    }
  },
  "blockTunes": {
    "delete": {
      "Delete": "删除"
    },
    "moveUp": {
      "Move up": "向上移动"
    },
    "moveDown": {
      "Move down": "向下移动"
    }
  }
}

在页面引入组件

这只是一个简单的示例,具体配置请去官网Editor.js (editorjs.io)

 Editor.js 在其核心设计中不直接包含一个传统的“顶部工具栏”。它的设计理念是简洁、无干扰的用户体验，焦点是在“块”内容上，而非传统的富文本编辑器的样式。因此，Editor.js 的默认设置下，不会显示类似 Word 或其他传统编辑器的顶部工具栏。

说一下我的心得:官方文档对中文及其不友好,不建议使用这个编辑器,除非你有大量时间来开发研究

Editor.js 是一个用于构建具有完全可定制化块结构的现代编辑器的开源库。它提供了一个简洁、可扩展和易于使用的接口，使开发人员能够创建拥有丰富内容和互动性的编辑器。

以下是一些 Editor.js 的特点和优势：

1. 块结构：Editor.js 采用了块结构的概念，将内容分解为可独立操作和样式化的不同块，如段落、标题、图像、列表等。这种结构使得对内容的编辑和扩展变得更加直观和灵活。

2. 嵌套块：不仅可以创建单一块的内容，还可以在块内部创建嵌套结构，构建复杂的内容组合。例如，你可以在段落块中嵌套标题、列表或引用块等。

3. 简洁的用户界面：Editor.js 的用户界面被设计成简洁、直观且易于使用。用户可以通过简单的操作来创建、编辑和删除块，不需要关注复杂的标记语法或样式细节。

4. 开放的插件系统：Editor.js 提供了一个强大的插件系统，允许开发人员创建自定义块类型和扩展编辑器功能。你可以根据需要编写自己的块插件，并将其集成到编辑器中，以满足特定的编辑需求。

5. 丰富的内容保存：Editor.js 使用 JSON 格式保存编辑器的内容。这种格式简单易懂，便于存储和传输，同时保留了块结构和样式的信息。你可以将编辑器的内容保存到数据库中，然后在需要时重新加载。

6. 可扩展的主题和样式：Editor.js 的外观和样式可以根据你的品牌和设计需求进行定制。你可以创建自己的主题或使用现有的主题来改变编辑器的外观。

7. 多语言支持：Editor.js 支持多种语言，可以轻松地切换编辑器的显示语言或自定义特定术语的翻译。

总而言之，Editor.js 是一个功能强大、灵活且易于使用的编辑器库，适用于构建各种应用程序中的富文本编辑功能，如内容管理系统、博客平台、电子商务平台等。它提供了现代化的编辑体验，同时让开发人员能够自由定制编辑器以满足个性化需求。