Directions for use of Annotation editor for JavaSript based WYSIWYG editors

Table of contents:


  1. Download and install 4A server (follow the directions in Directions for use of 4A Annotation Server) - SEC API is not mandatory - default is to use our
  2. Run the server.
  3. Clone GIT repository with client into web server directory (eg. /var/www/):
  4. If you are not using it only on localhost, configure annotation server address in client (search for all occurences of localhost:8080).
  5. Optionally run make in the directory with client to get more example documents to annotate.
  6. Open index page in repository with client (eg. http://localhost/4Aclient2/) and observe annotation extension in TinyMCE.

Displaying of annotation editor GUI and connecting to the server

  1. To display annotation editor GUI you can click to extension button on the toolbar of your WYSIWYG editor.
  2. On the testing page editor is configured to connect automatically with default testing user name and password. If you have another one on the server, it is necessary to change index.php (if you will remove configuration for automatic authentication, client will ask for login and password).
  3. It can take some time to establish connection with the server (few seconds) and if there are zero or few annotations in the document, client will ask the server for annotation suggestions immediately which can take up to 1 or 2 minutes (according to length of the text, current SEC server load etc.).
  4. To hide the GUI, you can click to the button again.
Extension button

Creation of an simple annotation

  1. Select range of annotated text by mouse.
  2. Click to Annotate button on annotation editor toolbar to display Edit Annotation window (window is not modal, so you can select annotated text or adjust selection later).
  3. Select type of annotation (described later).
  4. Optionally you can fill in textual content of annotation (eg. your note).
  5. Save annotation by Save button on the right bottom corner of the window.
Creation of an simple annotation

Selecting type of annotation

Structuring of annotations

Attribute of type Image Attribute of type annotation link

Templates for attributes

Viewing of annotations

Viewing of annotations

Annotations of whole document



Settings - Section Annotation types

Settings - Section Suggestions

Settings - Section Annotation window

Settings - Section User

Settings - Section Windows

Settings - Section Advanced menu

Settings - Section Other

Suggesting of annotations


Alternative suggestions

Alternative suggestions


User Groups


Other features