Hippo CMS External Document Picker Base

Add Dependencies

Make sure you have the forge Maven2 repository reference and dependency definition in the root pom.xml of your project.

    <repositories>

      <!-- SNIP -->

      <repository>
        <id>hippo-maven2-forge</id>
        <name>Hippo Maven 2 Forge Repository</name>
        <url>https://maven.onehippo.com/maven2-forge/</url>
      </repository>

      <!-- SNIP -->

    </repositories>

    <!-- SNIP -->

    <dependencyManagement>

      <!-- SNIP -->

      <dependencies>

        <!-- SNIP -->

        <!-- NOTE: You should set a property named 'forge.exdocpickerbase.version' to a version of this plugin! -->
        <dependency>
          <groupId>org.onehippo.forge.exdocpickerbase</groupId>
          <artifactId>exdocpickerbase-richtext-ckeditor</artifactId>
          <version>${forge.exdocpickerbase.version}</version>
        </dependency>

        <!-- SNIP -->

      </dependencies>

      <!-- SNIP -->

    </dependencyManagement>
    

Add the following dependency in either cms-dependencies/pom.xml in Hippo CMS v13 or cms/pom.xml in the earlier versions.

    <dependencies>

      <!-- SNIP -->

      <dependency>
        <groupId>org.onehippo.forge.exdocpickerbase</groupId>
        <artifactId>exdocpickerbase-richtext-ckeditor</artifactId>
      </dependency>

      <!-- SNIP -->

    </dependencies>
    

Add Configuration

In order to enable the exdocpickerbase CKEditor plugin, you should customize CKEditor configuration for a RichText editor.

In a nutshell, you should add 'exdocpickerbase' as extra CKEditor plugin in the ckeditor.config.overlayed.json property like the following example: (See CKEditor configuration properties for details on those properties.)

{
  "extraPlugins": "exdocpickerbase"
}

And, you should add configurations for 'exdocpickerbase' CKEditor plugin additionally in the ckeditor.config.appended.json like the following example:

{
  "exdocpickerbase" : {
    "buttonLabel" : "Link to Hippo Blog Articles",
    "buttonIcon" : "/cms/images/hippoblogpicker.png",
    "dialogTitle" : "Hippo Blog Article Browser",
    "dialogMinWidth" : 640,
    "dialogMinHeight" : 480,
    "defaultDocumentIcon" : "/cms/images/onehippo-default.png",
    "getSearchURL" : "return '/cms/examples/hippoblogarticles.jsp?q=' + encodeURI(data.query);",
    "getLinkAttributes" : "var attrs = {}; attrs['href'] = item.href; attrs['data-custom1'] = item['data-custom1']; return attrs;"
  }
}

For example, the configuration change shown above can be made for /hippo:namespaces/hippostd/html node in order to apply the exdocpickerbase CKEditor plugin globally to all RichText fields.

Now, you're ready to use the plugin!