Giter VIP home page Giter VIP logo

editor.js's Introduction

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 [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's People

Contributors

can4ly avatar dependabot[bot] avatar dermanov-ru avatar ferntheplant avatar geekan2 avatar github-actions[bot] avatar gitter-badger avatar gohabereg avatar goldenjaden avatar hata6502 avatar horoyami avatar ilyamore88 avatar kaaaaaaaaaaai avatar khaydarov avatar liammartens avatar n0str avatar nespecc avatar nikmel2803 avatar osain-az avatar polinashneider avatar ranemihir avatar robonetphy avatar sjquant avatar spanic avatar swapster avatar talyguryn avatar tatianafomina avatar theaidem avatar vikhorkonstantin avatar woren951 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

editor.js's Issues

Удаление блоков

Нужно удаление блоков.
Новые текстовы удалять по бекспейс и возвращаться на предыдущий

Create iterateBlock method

It iterates blocks and calls save() method of each entry.
Then it builds final JSON and moves to the database.

Вынести санитайз в метод API

Вынести

block.addEventListener('paste', function (event) {
     cEditor.callback.blockPaste(event, block);
}, false);

в метод activateSatizeOnPase , который будет вешать разработчик плагина при создании contenteditable элемента

Server-side Url parser

Parse URL on php and return JSON object:

{
    'fullLink'      : 'http://yandex.ru',
    'shortLink'     : 'yandex.ru',
    'image'         : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png',
    'title'         : 'Яндекс',
    'description'   : 'Сайт, поисковик, проч.'
};

Добавить заголовки в редактор

Добавить возможность работы с заголовками в редакторе.

При открытии редактора можно ставить курсор на большой заголовок (в случае статей — это название статьи).
А после того, как закончена работа с заголовком по Enter переходить в первый текстовый блок.

# это заголовок H1, ## это заголовок H2, ну или H2 и H3 соответственно.

Настройки блоков --цитаты

  • В момент отображения блока с настройками (cEditor.toolbar.setting.open), добавлять в него toolname.settings
  • в toolname.settings лежит элемент с кнопками настроек (например, три кнопки "цитата с подписью", "цитата с аватаркой и именем", "обычная цитата")
  • на кпопках в настройках висят события клика
  • при клике вызывается switchBlock и цитата заменяется на новый шаблон

Управление тулбаром с клавиатуры

Сейчас реализовано только открытие по TAB. Надо сделать чтобы дальнейшее нажатие на TAB переключало указатель по элементам тулбара (они становились синими слева направо по кругу), по ENTER делался новый node с выбранным инструментом. По ESCAPE тулбар закрывался.

Link tool

Ошибка когда в инпут поле вставляется ссылка без 'path'

Позиция тулбара

При наведении курсора на поле "redactor" тулбар закрывает узел ( отрисовывается поверх узла ), а при последующих наведениях курсора тулбар отображается нормально.

Запуск редактора для уже готовой статьи

Нужно добавить возможность создавать редактор для уже готового текста, то есть на вход поступает объект в специальном формате, а на выходе будет статья, которая выглядит в редакторе так же, как и на сайте.

Концепция модульной структуры

В данный момент работа идет через prototype.
Надо подумать надо более оптимальной структурой.

Идея берет свое начало здесь
#4 (comment)

Там же можно посмотреть что именно сейчас не так.

Create iterateJSON method

Method iterates JSON nodes and call render() function for every enrty.
Then it appends result HTML to the cEditor.

Удаление блоков

image

  • Добавить кнопку в тулбар, рядом с настройками блока
  • При клике — дописывать на ce_block класс removing-request , который делает блок полупрозрачным, а кнопка удаления становится красной (показано на макете)
  • При повтором клике на уже красную кнопку удаления — блок удаляется

Onboarding

  • Преимущества и планы по разработе.

Сделать крутую страницу example

Это будет первая страница, которую увидят пользователи, захотевшие пользоваться редактором, нужно сделать что-то наподобие лендинга, на котором будут показаны основные возможности редактора.

Добавить параметры настроек при инициализации + Настройка tools

Сейчас конструктор принимает ID textarea, которую мы заменяем редактором. Это можно выпилить и задать ID статично. То есть для инициализации редатора надо будет добавить определенный ID к textarea и вызвать конструктор.

Надо, чтобы вместо ID конструктор принимал объект settings с пользовательскими настройками. Например, tools, которая будет задавать массив кнопочек тулбара.

window.cEditor = new ce({
     tools : ["header", "picture", "list"]
});

Потом добавятся еще настройки.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.