getting_started.md

Getting started

• Installation
• Usage
• Configuration
• Run for development
• Recomendations

Installation

There are three ways to install Textarena to your project:

1. Node.js package
2. Using a CDN
3. Manually load file

Node.js package

Install the package via NPM or Yarn:

npm install @itsumma/textarena

yarn add @itsumma/textarena

Import module in your ES6 application:

import Textarena from '@itsumma/textarena';

Or include in your ES5 application:

const Textarena = require('@itsumma/textarena');

Then import styles from the package:

@import "/node_modules/@itsumma/textarena/scss/style.scss";

Or use the webpack:

@import "@itsumma/textarena";

Also you can use other import methods.

Using a CDN

You can load specific version of package from jsDelivr CDN and add to your page:

<script src="https://cdn.jsdelivr.net/npm/@itsumma/textarena@latest"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@itsumma/textarena@latest/public/textarena.css">

Manually load file

Load textarena.js and textarena.css files to your project and use them.

Usage

Add a HTML element to the page with id='textarena-container', for example:

<div id="textarena-container"></div>

At JavaScript code initialize Textarena.

import Textarena from '@itsumma/textarena';

const elem = document.getElementById('textarena-container');
const textarena = new Textarena(elem);

This will render editable text field inside textarena-container element in the DOM.

When the cursor is on an empty paragraph, a placeholder hint appears.

Click at the plus sign or press Tab to expand creator bar.

You can click on the item to insert it at the cursor position or use arrows or Tab.

You can specify elements styles, insert lists, headings and etc. via toolbar.
Select text to view toolbar options.

Hold Ctrl (Cmd ⌘ on Mac) or Alt (Option ⌥ on Mac) to see shortcut tips.

Configuration

You can configure your Texarena by passing optional configuration object at second parametr of Textarena initialization:

import Textarena from '@itsumma/textarena';

const elem = document.getElementById('textarena-container');
const textarena = new Textarena(
    elem, 
    {
        // Properties of
        // configuration
        // object
    }
);

The available properties are listed below:

Property	Description
editable	A boolean value indicating disable or enable editing capabilities.
debug	A boolean value indicating disable or enable editing capabilities.
onChange	The callback which receives TextarenaData object which contains html or other format like rss and amp of the Textarena container on changing data at Textarena.
onReady	The callback which receives TextarenaData object which contains html or other format like rss and amp of the Textarena container at the end of loading data into Textarena.
onReady	The callback which receives ArenaEvent object at each event.
initData	The object of initial Textarena content and metadata. Initial content is passing to dataHTML property.
placeholder	The string with custom placeholder that is displayed in an empty paragraph.
plugins	An array of Textarena plugins and their properties. You can find more information about plugins here.
toolbar	The object of toolbar options: enabled - a boolean value indicating disable or enable toolbar; tools - string array of Textarena element names.
creatorBar	The object of creator bar options: enabled - a boolean value indicating disable or enable creator bar; creators - string array of Textarena element names.
outputTypes	A string array of formats of output data generated based on the Textarena. Such as html, amp or rss.

Run for development

Install all Textarena dependencies by yarn:

yarn

Start the developmnet server:

yarn start

Open in your browser http://localhost:8080.

Recomendations

Add paddings arround the editor:

.textarena-editor {
  padding: 1rem;
}

This will make it easier to select text with the mouse.