Add this snippet of code in composer.json
:
"require": {
// ...
"luperi/page-annotator-bundle": "dev-master"
}
Register the bundle in app/AppKernel.php
:
<?php
// app/AppKernel.php
public function registerBundles()
{
$bundles = array(
// ...
new Luperi\PageAnnotatorBundle\PageAnnotatorBundle(),
);
}
Open a console window, enter into the project directory and run the following code:
php composer.phar update
If you get memory errors, try increasing it with this code:
php -dmemory_limit=1G composer.phar update
Edit app/config/config.yml
adding the following lines:
# Doctrine Configuration
doctrine:
dbal:
default_connection: default
connections:
default:
driver: %database_driver%
host: %database_host%
port: %database_port%
dbname: %database_name%
user: %database_user%
password: %database_password%
charset: UTF8
annotation:
driver: %database_driver%
host: %database_host%
port: %database_port%
dbname: annotations_DB
user: %database_user%
password: %database_password%
charset: UTF8
orm:
auto_generate_proxy_classes: %kernel.debug%
default_entity_manager: default
entity_managers:
default:
// ...
annotation:
connection: annotation
mappings:
PageAnnotatorBundle:
type: annotation
Open a console window, enter into the project directory and run the following code:
php app/console doctrine:database:create --connection=annotation
Open a console window, enter into the project directory and run the following code:
php app/console doctrine:schema:update --force --em=annotation
In your html page import the libraries by adding these lines:
<script type="text/javascript" src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
<script type="text/javascript" src="{{ path("page_annotator_library_js") }}"></script>
And the style:
<link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
N.B.: the two following examples use twig to resolve the routes
<html>
<head>
<script type="text/javascript" src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
<script type="text/javascript" src="{{ path("page_annotator_library_js") }}"></script>
<link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
<script>
$(function(){
// Add store plugin
$('#container').annotator()
.annotator('addPlugin', 'Store',
{
prefix: '',
annotationData: {
'uri': '<your_url>'
},
loadFromSearch:
{
'limit': 0,
'uri' : '<your_url>'
},
urls: {
// These are the default URLs.
create: '{{ path("page_annotator_save") }}',
update: '{{ path("page_annotator_save") }}',
destroy: '{{ path("page_annotator_delete") }}',
search: '{{ path("page_annotator_search", { 'uri' : '<your_url>' }) }}'
}
});
// Set Annotator Language, for example Italian
setAnnotatorLanguage("it");
});
</script>
</head>
<body>
<div id='container'>
Here there is the text that must be annotated.
</div>
</body>
</html>
If you want to annotate with prefixed values instead of free comments, yuo have to modify your code in this way:
<html>
<head>
<script type="text/javascript" src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
<script type="text/javascript" src="{{ path("page_annotator_library_js") }}"></script>
<link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
<script>
$(function(){
// Init plugins
Annotator.Plugin.SavingAnnotation = (function() {
function SavingAnnotation(element, options) {
this.element = element;
this.options = options;
}
SavingAnnotation.prototype.pluginInit = function() {
this.annotator
.subscribe("beforeAnnotationCreated", function (annotation) {
console.info("The annotation: %o is going to be created!", annotation);
setAnnotatorFixedValueSelector("null");
})
.subscribe("annotationCreated", function (annotation) {
console.info("The annotation: %o has just been created!", annotation)
annotation.text = annotationCommentValue;
})
.subscribe("annotationEditorShown", function (editor, annotation) {
console.info("The annotation: %o is going to be updated!", annotation);
setAnnotatorFixedValueSelector(annotation.text);
})
.subscribe("annotationUpdated", function (annotation) {
console.info("The annotation: %o has just been updated!", annotation);
annotation.text = annotationCommentValue;
})
};
return SavingAnnotation;
})();
// Add all necessary plugins
$('#container').annotator()
.annotator('addPlugin', 'SavingAnnotation')
.annotator('addPlugin', 'Tags')
.annotator('addPlugin', 'Store',
{
prefix: '',
annotationData: {
'uri': '<your_url>'
},
loadFromSearch:
{
'limit': 0,
'uri' : '<your_url>'
},
urls: {
// These are the default URLs.
create: '{{ path("page_annotator_save") }}',
update: '{{ path("page_annotator_save") }}',
destroy: '{{ path("page_annotator_delete") }}',
search: '{{ path("page_annotator_search", { 'uri' : '<your_url>' }) }}'
}
});
// Set Annotator Language, for example Italian
setAnnotatorLanguage("it");
// Set fixed values
var values = ["Tag1", "Tag2", "Tag3"];
annotateWithFixedValues(values);
});
</script>
</head>
<body>
<div id='container'>
Here there is the text that must be annotated.
</div>
</body>
</html>
- Italian -> "it"
- Spanish -> "es"
- French -> "fr"
- German -> "de"
You can easily delete all annotation in two ways. If you want to delete all the annotations saved in the DB:
deleteAllAnnotations();
Instead, if you want to delete only the annotations about a specific url, you can do this:
deleteAllAnnotationsByUrl("<your_url>");
In your PHP code, yuo can manage annotations as entity object in this way:
use Luperi\PageAnnotatorBundle\Controller\AnnotationController;
class YourClassController extends Controller
{
public function YourAction()
{
$annotations = AnnotationController::getAll();
return $this->render('YourBundle:YourClass:Your.html.twig', ['annotations' => $annotations]);
}
}
See PageAnnotatorBundle/Entity/Annotation.php
for available methods
This bundle is released under the MIT license. See the complete license in the bundle:
Resources/meta/LICENSE