mirror of
https://github.com/codex-team/editor.js
synced 2024-06-10 09:52:36 +02:00
Taly
Peter Savchenko
parent
33bb8f5176
commit
1627f8a3bd
30
README.md
30
README.md
|
|
@ -1,6 +1,6 @@
|
|||
<p align="center"><img src="https://capella.pics/3c0b525b-50d9-4720-8aad-9148114cfa6e.jpg"></p>
|
||||
|
||||
|
||||
|
||||
|
||||
## Version 2.0-beta is here!
|
||||
|
||||
|
|
@ -136,33 +136,32 @@ Copy [codex-editor.js](build/codex-editor.js) file to your project and load it.
|
|||
|
||||
## Load Tools
|
||||
|
||||
Each Block at the CodeX Editor represented by [Tools](docs/tools.md). There are simple external scripts with own logic. To start using the Editor, you should connect at least one Block Tool.
|
||||
Each Block at the CodeX Editor represented by [Tools](docs/tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected.
|
||||
|
||||
For example check out our [Paragraph](https://github.com/codex-editor/paragraph) Tool that represents simple text block.
|
||||
For example check out our [Header](https://github.com/codex-editor/header) Tool that represents heading blocks.
|
||||
|
||||
Each Tool should have an installation guide. You can install Paragraph Tool via the same ways as an Editor (Node.js, CDN, local file).
|
||||
You can install Header Tool by the same way as the Editor (Node.js, CDN, local file).
|
||||
|
||||
Check [CodeX Editor's community](https://github.com/codex-editor) to see Tools examples.
|
||||
Check [CodeX Editor's community](https://github.com/codex-editor) to see more ready-to-use Tools.
|
||||
|
||||
**Example:** use Paragragh from CDN
|
||||
**Example:** use Header from CDN
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/codex.editor.paragraph@2.0.3/dist/bundle.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.0.4/dist/bundle.js"></script>
|
||||
```
|
||||
|
||||
## Create Editor instance
|
||||
|
||||
Create an instance of CodeX Editor and pass [Configuration Object](src/components/interfaces/editor-config.ts).
|
||||
Minimal params is a `holderId`, `tools` list and `initialBlock` marker.
|
||||
Create an instance of CodeX Editor and pass [Configuration Object](src/components/interfaces/editor-config.ts) with `holderId` and tools list.
|
||||
|
||||
```html
|
||||
<div id="codex-editor"></div>
|
||||
```
|
||||
|
||||
You can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `codex-editor`.
|
||||
You can create a simple Editor with only default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param. Or use the default `codex-editor` id for wrapper.
|
||||
|
||||
```javascript
|
||||
var editor = new CodexEditor();
|
||||
var editor = new CodexEditor(); /** Zero-configuration */
|
||||
|
||||
// equals
|
||||
|
||||
|
|
@ -183,17 +182,12 @@ var editor = new CodexEditor({
|
|||
* Pass Tool's class or Settings object for each Tool you want to use
|
||||
*/
|
||||
tools: {
|
||||
paragraph: {
|
||||
class: Paragraph,
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar : true
|
||||
},
|
||||
// ...
|
||||
},
|
||||
|
||||
/**
|
||||
* What Block will be inserted by default
|
||||
*/
|
||||
initialBlock : 'paragraph',
|
||||
|
||||
/**
|
||||
* Previously saved data that should be rendered
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ Install the package via NPM or Yarn
|
|||
npm i codex.editor --save-dev
|
||||
```
|
||||
|
||||
Include module at your application
|
||||
Include module at your application
|
||||
|
||||
```javascript
|
||||
const CodexEditor = require('codex.editor');
|
||||
|
|
@ -52,21 +52,23 @@ Copy [codex-editor.js](../build/codex-editor.js) file to your project and load i
|
|||
|
||||
## Load Tools
|
||||
|
||||
Each Block at the CodeX Editor represented by [Tools](tools.md). There are simple external scripts with own logic. For example check out our [Paragraph](https://github.com/codex-editor/paragraph) Tool that represents simple text block.
|
||||
Each Block at the CodeX Editor represented by [Tools](tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected.
|
||||
|
||||
Each Tool should have an installation guide. You can install Paragraph Tool via the same ways as an Editor (Node.js, CDN, local file).
|
||||
For example check out our [Header](https://github.com/codex-editor/header) Tool that represents heading blocks.
|
||||
|
||||
You can install Header Tool via the same ways as an Editor (Node.js, CDN, local file).
|
||||
|
||||
Check [CodeX Editor's community](https://github.com/codex-editor) to see Tools examples.
|
||||
|
||||
**Example:** use Paragragh from CDN
|
||||
**Example:** use Header from CDN
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/codex.editor.paragraph@2.0.3/dist/bundle.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.0.4/dist/bundle.js"></script>
|
||||
```
|
||||
|
||||
## Create Editor instance
|
||||
|
||||
Create an instance of CodeX Editor and pass [Configuration Object](../src/components/interfaces/editor-config.ts).
|
||||
Create an instance of CodeX Editor and pass [Configuration Object](../src/components/interfaces/editor-config.ts).
|
||||
Minimal params is a `holderId`, `tools` list and `initialBlock` marker.
|
||||
|
||||
```html
|
||||
|
|
@ -76,7 +78,7 @@ Minimal params is a `holderId`, `tools` list and `initialBlock` marker.
|
|||
You can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `codex-editor`.
|
||||
|
||||
```javascript
|
||||
var editor = new CodexEditor();
|
||||
var editor = new CodexEditor(); /** Zero-configuration */
|
||||
|
||||
// equals
|
||||
|
||||
|
|
@ -97,18 +99,13 @@ var editor = new CodexEditor({
|
|||
* Pass Tool's class or Settings object for each Tool you want to use
|
||||
*/
|
||||
tools: {
|
||||
paragraph: {
|
||||
class: Paragraph,
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar : true
|
||||
},
|
||||
// ...
|
||||
},
|
||||
|
||||
/**
|
||||
* What Block will be inserted by default
|
||||
*/
|
||||
initialBlock : 'paragraph',
|
||||
|
||||
/**
|
||||
* Previously saved data that should be rendered
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ CodeX Editor is a block-oriented editor. It means that entry composed with the l
|
|||
|
||||
`Tool` — is a class that provide custom `Block` type. All Tools represented by `Plugins`.
|
||||
|
||||
Each Tool should have an installation guide.
|
||||
|
||||
## Tool class structure
|
||||
|
||||
### constructor()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "codex.editor",
|
||||
"version": "2.0.2",
|
||||
"version": "2.0.3",
|
||||
"description": "Codex Editor. Native JS, based on API and Open Source",
|
||||
"main": "build/codex-editor.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue