TextAPI

$3

Keep the following in mind

- TextAPI.js is an abstraction, please know that there is no UI.
- Undo/Redo will come in the future

DEMO

try me

API Overview

$3

``js
npm i @creaditor/text-api --save
`

$3

`js
import TextAPI from "@creaditor/text-api";
`

$3

| Mode | Description |
| ------ | -------------------------------------------------------------------- |
| Toggle | Style elements with on/off functionality, like bold,underline,italic |
| |
| Extend | Only extends the currect style, font-size, color, backgorund |

Basic Usage

$3

`js
import TextAPI from '@creaditor/text-api';
const textAPI = new TextAPI("editor-id");
1cont MODES = textAPI.MODES;

const underline =()=> textAPI.execCmd('text-decoration', 'underline', Modes.Toggle);
const bold =()=> textAPI.execCmd('font-weight', 'bold', MODES.Toggle);
`

$3

`js
import TextAPI from '@creaditor/text-api';
const textAPI = new TextAPI("editor-id");
cont MODES = textAPI.MODES;

const changeColor =(color)=> textAPI.execCmd('color', color, MODES.Extend);
const changeSize =(size)=> textAPI.execCmd('font-size', size, MODES.Extend);
`

$3

The textAlign, padding, margin, line-height and more property sets the horizontal alignment of text in a block level element. It must be used on a block level element (p, div, etc.)

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");
const MODES = textAPI.MODES;

const changeAlign = (align) =>
textAPI.execCmd("text-align", align, MODES.Extend, {
target: "block",
});
`

Inspector

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

textAPI.on("inspect", (collectedStyles) => {
// do something with the styles..
});
`

Format Block

Adds an HTML block-level element around the line containing the current selection.

$3

| Tag Name |
| -------- |
| H1 |
| H2 |
| H3 |
| H4 |
| H5 |
| H6 |
| P |
| PRE |
| ADDRESS |

$3

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

const toggleClass = (tagName) => textAPI.formatBlock(tagName);
`

Style with Tags (toggle mode)

| Tag Name |
| -------- |
| B |
| STRONG |
| MARK |
| EM |
| I |
| S |
| STRIKE |
| DEL |
| U |
| SUB |
| SUP |
| SMALL |
| SUB |

$3

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

textAPI.toggleWith("strong");
`

Css Class API

The Css Class API lets you create a Css class with your pre-made rules. You can pass this class to a TextAPI object and use it as a markup just like underline or bold.

$3

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

const toggleClass = (name) => textAPI.toggleClass(name);
`

Links

$3

`js
import TextAPI from '@creaditor/text-api';
const textAPI = new TextAPI("editor-id");

const createLink = () => textAPI.link({
href:'textAPI.com',
protocol:'https'
target:'_blank'
});
`

Links Inspector

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

textAPI.on("inspectLink", (props) => {
// {href,protocl,target,element}
});
`

Save Function

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

const contentAsJson = textAPI.save();
`

Load Function

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

textAPI.load(contentAsJson);
`

Destroy

Will remove all TextAPI functionality.

`js
import TextAPI from "@creaditor/text-api";
const textAPI = new TextAPI("editor-id");

textAPI.destroy();
``

text-api