An embeddable, web-based visual editor of text annotation
http://textae.pubannotation.org/
You can also use textae as an npm package in your project.
To install the package, run the following command:
npm install @pubann/textaeTo 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 classtextae-editorto your HTML. This is the element where the TextAE editor will be rendered.
<div class="textae-editor" title="Example Editor" mode="edit"></div>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>This editor is customizable by html attributes.
Set the url of an annotations json.
Example:
<div class="textae-editor" source="./annotations.json" ></div>Set the url of a config json.
Example:
<div class="textae-editor" config="./config.json" ></div>Set the url of the autocompletion web service.
Example:
<div class="textae-editor" autocompletion_ws="/autocomplete?order=desc"></div>Set default edit mode. values:
- view (default)
- edit
Example:
<div class="textae-editor" mode="edit"></div>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>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>Node.js is required to be installed on your system.
- To clone the project and get into the directory
git clone [email protected]:pubannotation/textae.git
cd textae/
- To install the required npm packages (which are specified in 'package.json').
npm install
- 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.
- To compile the files for distribution into the dictionary 'dist'.
npm run dist
Released under MIT license.