@pubann/textae NPM

TextAE

An embeddable, web-based visual editor of text annotation

homepage

http://textae.pubannotation.org/

Usage

Using as an npm package

You can also use textae as an npm package in your project.

Installation

To install the package, run the following command:

npm install @pubann/textae

How to Use in HTML

To use TextAE in your HTML, follow these steps:

Include the stylesheet and script

Add the following lines to your <head> section to load the TextAE CSS and JS from your node_modules directory:

<link rel="stylesheet" href="node_modules/@pubann/textae/dist/lib/css/textae-x.y.z.min.css">
<script src="node_modules/@pubann/textae/dist/lib/textae-x.y.z.min.js"></script>

Note: Replace x.y.z with the actual version number you have installed.

Prepare the container Add a <div> element with the class textae-editor to your HTML. This is the element where the TextAE editor will be rendered.

<div class="textae-editor" title="Example Editor" mode="edit"></div>

Example HTML

Here is an example of how to use textae in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TextAE Example</title>
  <link rel="stylesheet" href="node_modules/@pubann/textae/dist/lib/css/textae-x.y.z.min.css">
  <script src="node_modules/@pubann/textae/dist/lib/textae-x.y.z.min.js"></script>
</head>
<body>
  <div class="textae-editor" title="Example Editor" mode="edit"></div>
</body>
</html>

parameters

This editor is customizable by html attributes.

source

Set the url of an annotations json.

Example:

<div class="textae-editor" source="./annotations.json" ></div>

config

Set the url of a config json.

Example:

<div class="textae-editor" config="./config.json" ></div>

autocompletion_ws

Set the url of the autocompletion web service.

Example:

<div class="textae-editor" autocompletion_ws="/autocomplete?order=desc"></div>

mode

Set default edit mode. values:

view (default)
edit

Example:

<div class="textae-editor" mode="edit"></div>

control

Show the control bar of the editor.

auto (default) : Show the control bar in edit mode
visible : Show the control bar always
hidden : Do not show the control bar always

Example:

<div class="textae-editor" control="visible" ></div>

status_bar

Show the status bar of the editor. When the value is 'on', show the status bar. the status bar is not shown at default.

Example:

<div class="textae-editor" status_bar="on" ></div>

For development

Preparation

Node.js is required to be installed on your system.

To clone the project and get into the directory

git clone git@github.com:pubannotation/textae.git
cd textae/

To install the required npm packages (which are specified in 'package.json').

npm install

Development

To open in your browser the file 'dev/development.html' through 'http://localhost:8000', for development

npm run watch

If the file does not open automatically, click here.
For development, your editions are supposed to be made to the files in the 'src' directory.

Build

To compile the files for distribution into the dictionary 'dist'.

npm run dist

Contributors (so far)

Jin-Dong Kim (DBCLS)
Yue Wang (DBCLS)
Shigeru Nakajima (Luxiar)
Masahiro Nakashima (YouWorks)

License

Released under MIT license.

DBCLS annotation javascript

14.0.1

5 months ago

14.0.0

5 months ago

13.11.0

5 months ago