luperi/page-annotator-bundle

用于注释HTML页面的组件包，为annotatorjs开发

维护者

详细信息

github.com/Luperi/PageAnnotatorBundle

主页

源代码

问题

安装: 115

依赖: 0

建议者: 0

安全: 0

星星: 10

关注者: 1

分支: 3

开放问题: 0

类型:symfony-bundle

dev-master 2015-12-02 12:03 UTC

Requires

MIT 82d616987b329e702c4f30f2190d02e140eb5d0d

  • Luca Perico <pericoluca1993.woop@gmail.com>

htmlannotatorannotatorjsannotate

This package is not auto-updated.

Last update: 2024-09-28 17:02:12 UTC

README

安装

步骤1：下载组件包

在composer.json中添加以下代码片段

"require": {
    // ...
    
    "luperi/page-annotator-bundle": "dev-master"
}

步骤2：启用组件包

在app/AppKernel.php中注册组件包

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...

        new Luperi\PageAnnotatorBundle\PageAnnotatorBundle(),
    );
}

步骤3：Composer更新

打开控制台窗口，进入项目目录并运行以下代码

    php composer.phar update

如果遇到内存错误，尝试使用以下代码增加内存

    php -dmemory_limit=1G composer.phar update

步骤4：数据库连接参数

编辑app/config/config.yml并添加以下行

# 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

步骤5：创建数据库

打开控制台窗口，进入项目目录并运行以下代码

    php app/console doctrine:database:create --connection=annotation

步骤6：创建数据库表

打开控制台窗口，进入项目目录并运行以下代码

    php app/console doctrine:schema:update --force --em=annotation

使用方法

在您的HTML页面中通过添加以下行导入库

    <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">

使用标准annotator的示例

注意：以下两个示例使用twig解析路由

<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>

使用固定值的示例

如果您想使用前缀值而不是自由评论来注释，您需要按照这种方式修改您的代码

<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>

支持的语言

  • 意大利语 -> "it"
  • 西班牙语 -> "es"
  • 法语 -> "fr"
  • 德语 -> "de"

其他可用操作

您可以通过两种方式轻松删除所有注释。如果您想删除数据库中保存的所有注释

    deleteAllAnnotations();

相反，如果您只想删除特定URL的注释，您可以这样做

    deleteAllAnnotationsByUrl("<your_url>");

在您的PHP代码中，您可以按照这种方式将注释作为实体对象来管理

    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]);
        }
    
    }

有关可用方法，请参阅PageAnnotatorBundle/Entity/Annotation.php

许可

此组件包在MIT许可下发布。请参阅组件中的完整许可协议

Resources/meta/LICENSE