Fork me on GitHub

Installing External Link Picker Button in the RichText Editor

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>http://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!