@pubann/textae
Advanced tools
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/textae
To use TextAE in your HTML, follow these steps:
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.
<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>
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:
Example:
<div class="textae-editor" mode="edit"></div>
Show the control bar of the editor.
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.
git clone git@github.com:pubannotation/textae.git
cd textae/
npm install
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.
npm run dist
Released under MIT license.
FAQs
text annotation editor
The npm package @pubann/textae receives a total of 5 weekly downloads. As such, @pubann/textae popularity was classified as not popular.
We found that @pubann/textae demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
A fake corepack.org site is impersonating the Node.js tool and delivers an infostealer and proxyware to developers who download it.
Research
/Security News
A large-scale campaign abused GitHub Actions in compromised repositories to exploit CVE-2026-41940 in cPanel and WHM and steal server credentials.
Security News
Five frontier LLMs generated the same nonexistent package names, leaving 53 available for potential slopsquatting across PyPI and npm.