Editor.js 安装和配置指南

汪起景Monica

于 2024-09-13 22:06:40 发布

阅读量413

点赞数 3

本文链接：https://blog.csdn.net/gitblog_07287/article/details/142228041

版权

Editor.js 安装和配置指南

editor.js A block-style editor with clean JSON output 项目地址: https://gitcode.com/gh_mirrors/ed/editor.js

1. 项目基础介绍

Editor.js 是一个开源的块样式文本编辑器，旨在提供一个现代化的、灵活的编辑体验。它通过插件系统支持多种内容类型，如文本、图片、列表、引用等，并且输出干净的 JSON 数据，而不是复杂的 HTML 标记。Editor.js 适用于 Web、iOS、Android 等多个平台，易于集成和扩展。

主要编程语言

JavaScript
TypeScript

2. 项目使用的关键技术和框架

Block-style Editor: 提供块样式编辑界面，每个块可以独立添加和编辑。
JSON Output: 输出干净的 JSON 数据，便于后续处理和存储。
Plugin System: 通过插件系统支持多种内容类型和功能扩展。
Modern UI: 提供现代化的用户界面，易于使用。

3. 项目安装和配置的准备工作和详细步骤

准备工作

在开始安装之前，请确保你的开发环境已经安装了以下工具：

Node.js (建议版本 14.x 或更高)
npm 或 yarn (用于包管理)

安装步骤

1. 安装 Editor.js

你可以通过 npm 或 yarn 来安装 Editor.js：

npm install @editorjs/editorjs

或者使用 yarn：

yarn add @editorjs/editorjs

2. 选择并安装所需的工具

Editor.js 通过插件系统支持多种内容类型。你可以根据需要选择并安装相应的插件。以下是一些常用的插件：

Heading: 标题插件
Quote: 引用插件
Image: 图片插件
List: 列表插件
Link: 链接插件
Table: 表格插件

例如，安装标题插件：

npm install @editorjs/header

或者使用 yarn：

yarn add @editorjs/header

3. 初始化 Editor.js 实例

在你的项目中创建一个 HTML 文件，并在其中初始化 Editor.js 实例。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editor.js Example</title>
</head>
<body>
    <div id="editorjs"></div>

    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>

    <script>
        const editor = new EditorJS({
            holder: 'editorjs',
            tools: {
                header: {
                    class: Header,
                    inlineToolbar: ['link']
                }
            }
        });
    </script>
</body>
</html>

4. 保存数据

当你需要保存编辑器中的内容时，可以调用 editor.save() 方法，并处理返回的 Promise：

editor.save().then((outputData) => {
    console.log('Article data: ', outputData);
}).catch((error) => {
    console.log('Saving failed: ', error);
});