超棒的 Editor.js

精选的 Editor.js 工具、库和资源列表。

灵感来自awesome列表。欢迎通过贡献来改进这个列表！

目录

• 工具
  • 块工具
    • 文本和排版
    • 列表
    • 媒体和嵌入
    • 表格
    • 代码
    • 按钮
    • 布局
  • 内联工具
  • 块调整工具
  • 插件
• 库
  • JavaScript
    • Vue.js
    • React
    • React Native
    • Angular
    • Svelte
  • PHP
  • Python
  • Ruby
  • Go
  • Swift
  • Kotlin
  • CMS 插件
• 教程和资源
• 使用 Editor.js 的项目
  • 开源项目

<!-- * [应用 / 网站](#应用-网站) --> <!-- * [商业产品](#商业产品) -->

工具

块工具

文本和排版

• @editorjs/paragraph — 文本块基础工具
• @editorjs/header — 标题块
• @editorjs/quote — 引用工具
• @editorjs/warning — 警告工具，可用作编辑通知或呼吁
• @editorjs/delimiter — 分隔符工具
• editorjs-alert - 添加彩色警告消息的工具
• header-with-alignment - 带对齐控制的标题块基础工具
• paragraph-with-alignment - 带对齐控制的文本块基础工具。参见 editorjs-alignment-blocktune
• header-with-anchor - 能够设置锚点文本的标题块
• editorjs-toggle-block - 在可切换元素中嵌套块的工具
• editorjs-aitext - 基于段落工具和 openai node 库的 AI 建议工具
• title-editorjs - 为 Editor.js 提供标题（标题）块，具有各种设置，如 H1...H6、颜色（红色、粉色、紫色...）和文本对齐。兼容 React 和 TypeScript，不会导致类型错误。

列表

• @editorjs/list — 有序或无序（项目符号）列表
• @editorjs/nested-list — 多级列表
• @editorjs/checklist — 文本的检查列表
• @calumk/editorjs-nested-checklist — 文本的嵌套检查列表

媒体和嵌入

• @editorjs/image — 图片块
• @editorjs/simple-image — 通过粘贴图片URL向文章添加图片。无需服务器端上传器
• @editorjs/link — 带预览的链接
• @editorjs/attaches — 为文章附加文件
• @editorjs/embed — 处理粘贴的模式并插入带嵌入内容的iframe
• simple-image-editorjs — SimpleImage仓库的分支。增加了额外功能，如添加图片的工具栏（而不仅仅是拖放），并使用blob URL以改善内存使用
• editorjs-inline-image — 从图片文件、URL或Unsplash嵌入图片
• mr8bit/carousel-editorjs — Editor.js的轮播/图库块
• mdgaziur/EditorJS-LaTeX — EditorJS的LaTeX块支持
• rodrigoodhin/editorjs-image-gallery — 图片画廊块
• naduma/editorjs-mermaid — Editor.js的Mermaid块
• VolgaIgor/editorjs-gallery — 支持多图上传和排序的图库块
• AnatoliyKozlov/editorjs-telegram-post — Telegram帖子小部件
• renanrider/editorjs-audio-player - 简单的音频工具，仅适用于带有音频src的粘贴URL，无需服务器端上传器
• sureshHARDIYA/flipboxplus - 可配置的轮播，允许添加、编辑、删除幻灯片。幻灯片配置为翻转盒显示
• image-with-link - 上传带链接的图片。由官方图片插件分支而来

表格

• @editorjs/table — 表格构建工具
• editorjs-table - 具有出色的行/列编辑选项的表格构建工具

代码

• @editorjs/code — 代码示例工具
• @editorjs/raw — 在文章中包含原始HTML代码
• editor-js-code — Editor.js代码工具的一个分支，允许在文章中包含PrismJs支持的语言代码的代码示例
• editorjs-codemirror — Editor.js的Code Mirror允许在文章中包含代码示例
• @bomdi/codebox — Editor.js的代码语法高亮工具
• @calumk/editorjs-codeflask — 美观的代码高亮，带行号和语言支持。由Codeflask + PrismJs驱动
• ace-code-editorjs — Editor.js的Ace代码编辑器块，支持语言选择
• @rxpm/editor-js-code - 自定义代码插件，可向文章添加带语言下拉菜单的代码示例

按钮

• editorjs-button — 创建带链接和文本的按钮

布局

• editorjs-layout — Editor.js的布局块工具
• @calumk/editorjs-columns — 多列布局工具，使用嵌套的editorJs实例

内联工具

• @editorjs/marker — 用于高亮文本片段的工具
• @editorjs/inline-code — 用于标记等宽代码片段的工具
• @editorjs/underline — 文本下划线工具
• @editorjs/link-autocomplete — 基础内联链接工具的升级版，可与您的服务器搜索功能结合
• editorjs-hyperlink — Editor.js的链接工具，支持target和rel属性
• editorjs-inline-spoiler-tool — 内联文本剧透工具
• editorjs-inline-tool — 为Editor.js创建带有文本格式标签（如粗体、强调、斜体、下划线等）的内联工具
• editorjs-inline — Editor.js的内联编辑工具
• editorjs-inline-template — Editor.js的内联模板工具
• editorjs-style — Editor.js的内联样式工具
• editorjs-change-case — Editor.js的大小写转换工具
• editorjs-tooltip — 为Editor.js添加工具提示的工具
• @sotaproject/strikethrough — 文本删除线工具
• editorjs-text-color-plugin — 用自定义颜色为选中文本着色/标记的内联工具
• VolgaIgor/editorjs-annotation — 为Editor.js块中的任何文本添加扩展注释的工具
• editorjs-comment — 允许为Editor.js添加评论的工具

块调优工具

• @editorjs/text-variant-tune — 文本变体的块调优：标注、引用、详情
• editorjs-alignment-blocktune — 为任何块工具添加文本对齐功能
• VolgaIgor/editorjs-anchor — 为任何块工具添加锚点字段
• VolgaIgor/editorjs-notice — 高亮显示或隐藏任何Editor.js块并添加标题
• editorjs-indent-tune — 用于缩进任何类型块的块调优工具

插件

• editorjs-drag-drop — Editor.js的拖放功能
• editorjs-undo — Editor.js的撤销/重做功能
• editorjs-markdown-parser — 两个插件，允许导出/导入Markdown文件

库

JavaScript

• editorjs-parser — 一个在Node和浏览器中将Editor.js清洁数据解析为HTML的库
• editorjs-html — 将Editor.js清洁数据解析为HTML的实用工具
• editorjs-to-html — 将Editor.js格式解析为HTML，同时保留Editor.js标记格式
• editor-js-component — 一个可以使用Vue和React框架的Editor.js库

Vue.js

• Editorjs.vue — 使用v-model的Editor.js Vue 3 SFC，使用Video.js的自定义Vue组件
• vue-editor-js — 面向Vue用户的Editor.js

React

• react-editor-js — Editor.js的非官方React组件
• @stfy/react-editor.js — Editor.js的React包装组件
• editorjs-blocks-react-renderer — 将块渲染为语义HTML5标签的React组件
• editorjs-react — Editor.js React解析器，用于将Editor.js数据解析为JSX组件

React Native

• editorjs-viewer-native — 用于解析Editor.js生成的输出数据的React Native解决方案

Angular

• @tinynodes/ngx-editorjs — 这个库为Editor.js提供Angular支持

Svelte

• sveditorjs — 这个库为Editor.js提供Svelte支持

PHP

• editorjs-php — 服务器端数据验证、HTML净化和将输出JSON转换为块对象
• orchid-editorjs-field
• yii2-editorjs-widget — Yii 2的Editor.js小部件
• EditorjsBundle — Editor.js的Symfony包
• nova-editor-js — Laravel Nova的Editor JS字段
• codex-to-html — EditorJS JSON转HTML转换器
• magento2-editorjs — Magento 2的Editor.js模块
• editorjs-symfony-parser-bundle — Symfony的Editor.js包，用于解析Editor.js创建的块
• rahmanramsi/filament-editorjs - filamentphp的Editor JS
• bumpcore/editor.php - 用于解析和操作Editor.js输出的高级库，可使用原生PHP或Laravel
• editorjs-simple-html-parser - Editor.js的双向解析器：JSON转HTML和HTML转JSON

Python

• django-editorjs-fields — Django的Editor.js集成
• pyEditorJS - 用纯Python编写的非常简单的Editor.js解析器

Ruby

• editor_js — 验证、解析和渲染来自editorjs的内容
• render_editorjs — 一个模块化和可定制的Ruby编辑器.js渲染器

Go

• micheleriva/editorjs-go — Editor.js的快速markdown/HTML生成器
• davidscottmills/goeditorjs - editorjs的可扩展HTML/markdown生成器
• rodrigoodhin/go-editorjs-parser — 一个Golang库，可将Editor.js JSON输出转换为纯Markdown或HTML

Swift

• editor.js-kit-ios - 用于解析和渲染块的iOS框架

Kotlin

• editor.js-kit-android - 用于解析和渲染块的Android框架

CMS插件

• Front Editor - WordPress的Front Editor插件
• EditorJS - OctoberCMS的后端表单小部件
• Strapi-EditorJS - 用Editor.js替换Strapi默认的WYSIWYG编辑器
• Admin Block Editor - Pushword CMS的管理插件（基于symfony）
• Editor.js - Directus Extension - 为Directus添加Editor.js接口
• Cotonti CMF Editor.js plugin - Cotonti CMF的内容编辑器插件

教程和资源

• editorjs.io — 官方文档
• 教程：将Editor.js集成到React应用中
• 教程：使用React创建自定义editorjs块工具
• editorjs-examples — 使用Editor.js的示例

使用Editor.js的项目

👉 添加你的项目！

• Newsletter.page - 一个发送电子邮件通讯的平台
• IrenSystem - 商业系统 - 允许你与客户、经理、承包商和供应商合作
• beemy - 专用博客构建器，更好地管理内容
• Notice.studio - 融入您网站的CMS和组件编辑器
• Poda — 项目规划和路线图制定
• Slid - 在线学习者的视频笔记工具
• Unicorn Platform - 创建登陆页面并撰写博客
• MarsX - AI/无代码/专业代码构建器
• Walkthrough - 编写出色的代码实验室风格教程
• Drafts - 用于快速写草稿的基于网络的文本编辑器
• Cai - AI写作工具、内容生成器和写作助手
• Chronopin - 追踪您喜爱的游戏和兴趣的发布日期。还可以与志同道合的社区分享、评论和点赞您的帖子
• Contractify - 用于在线电子签名、管理和自动化所有合同的合同管理软件
• Tulsk - 旨在简化工作流程的AI驱动项目管理工具
• WebResearcherJS - 允许用户在网页上做笔记的Firefox扩展

开源项目

• frappeframework.com - 一个基于元数据的框架，具有使用Editor.js的工作区功能
• automad.org — 一个平面文件内容管理系统和模板引擎
• CodeX Docs — 文档引擎
• CodeX Media — 为教育或媒体组织构建现代网站的平台
• CodeX Notes — 基于Electron和Editor.js的跨平台桌面笔记应用
• Noter - 一个先进的实时协作笔记平台
• enassi - 加密助手，可加密并存储您的笔记和文件
• EvaNotebook - 用于Web技术的协作点对点笔记本

返回顶部