Embedding TextAE in HTML documents

You can embed TextAE in a HTML document as much as you like, in various styles you like.

Here is an example page which has multiple instances of TextAE. this page

Step 1. To load necessary lib’s and css’s

In the head area of a HTML document, put

<link rel="stylesheet" href="http://textae.pubannotation.org/lib/css/textae.min.css" />
<script src="http://textae.pubannotation.org/lib/textae.min.js"></script>

Step 2. To put a TextAE instance.

Wherever in the body of a HTML document, put

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

It will insert an empty TextAE instance in the HTML document.

Step 3. To load annotation in TextAE.

There are three ways as described below.

Step 3-1. To put annotation inside the TextAE instance.

<div class="textae-editor>
	{
		"text":"Hello World!",
		"denotations":[
			{"span":{"begin":0,"end":5},"obj":"Greet"},
			{"span":{"begin":6,"end":11},"obj":"Object"}
		]
	}
</div>

Step 3-2. To put annotation in a separate file, and specify the location.

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

Step 3-3. To get annotation from a web location.

<div class="textae-editor" target="http://example.org/your_annotation.json"></div>

Then, you will get this rendering in your browser

Tip) Note that a TextAE rendering is a normal div element, and you can freely style it using CSS.

Tip) You can embed TextAE instances as many as you like in one HTML document, like this page

Tip) By default, an instance of TextAE works as a visualizer. You can turn it into the editor mode by setting its mode to be edit.

<div class="textae-editor" mode="edit">
	{
		"text":"Press [h] to see 'help'",
		"denotations":[
			{"span":{"begin":6,"end":9},"obj":"Key"},
			{"span":{"begin":17,"end":23},"obj":"Page"}
		]
	}
</div>