editor.js README

The project's README from github.com/codex-team/editor.js. As one markdown file: README.md.

Editor.js Logo

editorjs.io | documentation | changelog

npm Minzipped size Backers on Open Collective Sponsors on Open Collective

About

Editor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.

Editor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic.

Editor.js Overview

Installation

It's quite simple:

  1. Install Editor.js
  2. Install tools you need
  3. Initialize Editor's instance

Install using NPM, Yarn, or CDN:

npm i @editorjs/editorjs

Choose and install tools:

See the 😎 Awesome Editor.js list for more tools.

Initialize the Editor:

<div id="editorjs"></div>

import EditorJS from '@editorjs/editorjs'

const editor = new EditorJS({
  tools: {
   // ... your tools
  }
})

See details about Installation and Configuration at the documentation.

Saving Data

Call editor.save() and handle returned Promise with saved data.

const data = await editor.save()

Example

Take a look at the example.html to view more detailed examples.

Roadmap

Support Editor.js

Like Editor.js?

You can support project improvement and development of new features with a donation to our team.

Donate via OpenCollective
Donate via Crypto
Donate via Patreon

Why donate

Donations to open-source products have several advantages for your business:

Sponsors

Support us by becoming a sponsor. Your logo will show up here with a link to your website.

Mister Auto UPLUCID, K.K. Kane Jamison Content Harmony

Become a Sponsor

Backers

Thank you to all our backers

Become a Backer

Contributors

This project exists thanks to all the people who contribute.

Need something special?

Hire CodeX experts to resolve technical challenges and match your product requirements.

Contact us via [email protected] and share your details

Community

About CodeX

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.

🌐 Join 👋 Twitter Instagram
codex.so codex.so/join @codex_team @codex_team

editor.js (codex-team/editor.js)

Searching Database…

32K ·GitHub
Editor.js
这是做什么用的？一个免费开源的网页块式（block）文本编辑器：写作者用文本、图片、列表、引用等区块来组织内容，保存结果是干净的 JSON，而不是臃肿的 HTML 标记。
块式编辑器和普通的所见即所得编辑框有什么不一样？内容不是一篇连续的文档，而是一组相互独立的区块（Block），每个区块由单独的插件（工具）提供，所以你可以精确控制有哪些区块类型，还能用自己的插件扩展编辑器。
怎么把它加到我的网页应用里？通过 NPM、Yarn 或 CDN 安装 Editor.js，装好需要的工具包，然后在页面里初始化一个 Editor 实例；文档里对安装和配置都有详细说明。
内容区块是自带的吗？不是——每种区块类型都是一个单独的工具插件，需要和核心库一起安装。官方工具涵盖标题、图片、表格、清单和嵌入内容；社区开发的工具则收录在 Awesome Editor.js 列表里。
还有哪些功能缺失或在做？协作编辑、撤销/重做管理器、跨区块的拖拽和选择功能都还在路线图上，尚未发布。
它能在哪些地方运行？保存的内容可以用在哪里？它作为网页应用的 JavaScript 组件在浏览器里运行；由于输出的是 JSON，同一份内容可以渲染到 Web、iOS、Android、AMP、Instant Articles、语音朗读工具和 AI 聊天机器人上。
可以免费使用吗，包括商业项目？可以——采用 Apache-2.0 许可证，免费开源；团队靠捐赠和赞助来支撑开发，不向用户收费。
编辑完成后我怎么把内容取出来？调用 editor.save() —— 它返回一个 Promise，解析后得到 JSON 格式的保存数据，你可以把它存起来或发送到应用需要的任何地方。
我可以自己写自定义的区块类型吗？可以——每个区块都是基于编辑器 API 构建的插件，仓库还提供 @editorjs/create-tool 来快速搭建新工具，自定义区块是一等公民的用法。
它能嵌入哪些服务？官方的 Embeds 工具支持 YouTube、Twitch、Vimeo、Gfycat、Instagram、Twitter 等平台；另外还有不需要后端的独立 Link embed 和 Simple Image 工具。
What are similar projects?medium-editor, summernote, pell, plate, lexical, wangEditor, milkdown, BlockNote
Which topics is it in?rich-text-editor, wysiwyg, cms, content-creation, plugin-system, editor, javascript-library, json, ui-components, plugin, ui, web-development
Creator
codex-team
Size
20.2 MB
Stars
32K
Updated
CommitSep 17Releasev2.31.7Sep 17
Age
10y
Commits · 90 Days