Go to file
Peter Savchenko ecdd73347c
fix(dx): dev example page fixed (#2682)
* fix dev example

* embed goes to master
2024-04-11 17:00:48 +03:00
.github feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00
.vscode feat(shortcuts): convert block by tools shortcut (#2419) 2023-07-20 23:27:18 +03:00
assets Update a readme (#2267) 2023-02-15 22:51:43 +03:00
docs feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00
example fix(dx): dev example page fixed (#2682) 2024-04-11 17:00:48 +03:00
public/assets Use Vite builder (#2300) 2023-04-13 22:25:29 +03:00
src feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00
test feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00
types feat(ui): native-like tab behaviour, slash for toolbox (#2569) 2023-12-22 23:15:35 +03:00
.editorconfig Release 2.14 (#799) 2019-06-12 20:38:16 +03:00
.eslintignore Release / 2.18 (#1181) 2020-06-03 11:17:29 +03:00
.eslintrc fix(slash): do not handle / + shift/alt, support for ascii keyboard (#2599) 2024-01-28 13:45:01 +03:00
.gitignore fix(block-tunes): enter keydown problems (#2650) 2024-03-13 17:30:16 +03:00
.gitmodules Use Vite builder (#2300) 2023-04-13 22:25:29 +03:00
.npmignore fix(npm): ignore redundant files in sub-directories (#2307) 2023-03-16 12:08:15 +00:00
.postcssrc.yml Use Vite builder (#2300) 2023-04-13 22:25:29 +03:00
.stylelintrc Release 2.0-beta (#387) 2018-08-05 14:51:58 +03:00
CODEOWNERS fix(#2036): scrolling issue with block hovering (#2042) 2022-05-01 15:09:16 +03:00
LICENSE Release 2.16 (#966) 2019-11-30 23:42:39 +03:00
README.md Update a readme (#2267) 2023-02-15 22:51:43 +03:00
cypress.config.ts feat(ui): native-like tab behaviour, slash for toolbox (#2569) 2023-12-22 23:15:35 +03:00
devserver.js feat(dx): add a dev-server for debugging on mobile devices from a local network (#2009) 2022-04-05 19:49:16 +03:00
index.html fix(toolbar): layout shrink after blocks removing (#2484) 2023-09-20 11:07:25 +03:00
package.json feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00
tsconfig.build.json Add build tsconfig for automatic deployments (#1784) 2021-09-17 15:47:29 +03:00
tsconfig.json Block tunes as a popover (#2091) 2022-11-03 20:52:33 +03:00
tslint.json Basic initialisation test for Editor.js (#1410) 2020-11-21 21:01:31 +03:00
vite.config.js chore(perf): initialisation and rendering performance optimisations (#2430) 2023-08-08 22:17:09 +03:00
yarn.lock feat(merge): blocks of different types can be merged (#2671) 2024-04-01 12:29:47 +03:00

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.

  • 😍  Modern UI out of the box
  • 💎  Clean JSON output
  • ⚙️  Well-designed API
  • 🛍  Various Tools available
  • 💌  Free and open source
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

  • Unified Toolbox
    • Block Tunes moved left
    • Toolbox becomes vertical
    • Ability to display several Toolbox buttons by the single Tool
    • Block Tunes become vertical
    • Block Tunes support nested menus
    • Conversion Toolbar uses Unified Toolbox
    • Conversion Toolbar added to the Block Tunes
  • Collaborative editing
    • Implement Inline Tools JSON format
    • Operations Observer, Executor, Manager, Transformer
    • Implement Undo/Redo Manager
    • Implement Tools API changes
    • Implement Server and communication
    • Update basic tools to fit the new API
  • Other features
    • Blocks drag'n'drop
    • New cross-block selection
    • New cross-block caret moving
  • Ecosystem improvements
    • CodeX Icons — the way to unify all tools and core icons
    • New Homepage and Docs
    • @editorjs/create-tool for Tools bootstrapping
    • Editor.js DevTools — stand for core and tools development
    • Editor.js Design System
    • Editor.js Preset Env
    • Editor.js ToolKit
    • New core bundle system
    • New documentation and guides
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:

  • If your business relies on Editor.js, you'll probably want it to be maintained
  • It helps Editor.js to evolve and get the new features
  • We can support contributors and the community around the project. You'll receive well organized docs, guides, etc.
  • We need to pay for our infrastructure and maintain public resources (domain names, homepages, docs, etc). Supporting it guarantees you to access any resources at the time you need them.
  • You can advertise by adding your brand assets and mentions on our public resources

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.

  • Resolve a problem that has high value for you
  • Implement a new feature required by your business
  • Help with integration or tool development
  • Provide any consultation

Contact us via team@codex.so 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