超棒的 Editor.js
精选的 Editor.js 工具、库和资源列表。
灵感来自awesome列表。欢迎通过贡献来改进这个列表!
目录
工具
块工具
文本和排版
- @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技术的协作点对点笔记本