Crafter CMS Logo in flat white
  • Crafter CMS Logo in flat white
  • Crafter CMS Site
Table of Contents
  • Getting Started
  • Content Authors
  • Developers
    • Crafter CMS Architecture
    • Content Modeling
    • Content Inheritance
    • Assets
    • Templates
    • Search with Elasticsearch
    • GraphQL
    • Plugins
    • Content Targeting
    • Redirects
    • Testing
    • Errors
    • Extending Crafter Studio
    • Developer Workflow (DevContentOps)
    • Subsystems and API Documentation
    • Cookbook / Tutorials
      • Cookbooks / Tutorials
        • Querying Content
        • Solutions: Active Cache
        • Solutions for Activiti
        • Solutions for AWS
        • Solutions for Box
        • Solutions RESTful Services
        • GraphQL
        • Crafter Marketplace
        • Best Practices
        • How-Tos
        • RTE How-tos
  • Site Administrators
  • System Administrators
  • Security
  • Release Notes
  • Roadmap
  • Contribute
  • Source Code
  • Support
  • FAQ
  • Acknowledgements
  • Docs
  • Developers
  • Cookbooks / Tutorials
  • RTE How-tos
  • Inserting Links to Pages in the Rich Text Editor (RTE)
  • Edit on GitHub
  • Document Up to Date

Inserting Links to Pages in the Rich Text Editor (RTE)¶

Users sometimes need to link to a page in the site to selected text in their document. This section details how to setup the Rich Text Editor (RTE) to allow a user to browse or search for pages and insert links to them.

Basic Setup and Configuration¶

  1. Open the content type with the Rich Text Editor (RTE) to be setup. Open the Sidebar and click on siteConfig and select Content Types. Click on Open Existing Type, and select the content type with the RTE you’d like to setup, then click on the Open Type button.

  2. Setup the data source to select a page from the site. From the content model definition, go to the Data Sources panel and drag File Browse to the the Data Sources section of the form and fill in the following properties:

    • Title : Data source title to show on the form e.g. Pages

    • Name : Name of variable to store the final result in e.g. pages

    • Repository Path : Path where to browse the pages from e.g. /site/website

  3. Bind the data source setup above to the RTE. From the content model definition, click on the RTE you want to be able to browse or search for pages and insert links to them. Next, go to the Properties Explorer panel and scroll to the File Manager property. Put a check mark on the box next to the data source previously setup to bind it to the RTE.

  4. Click on the Save button to save your changes. The RTE is now setup to allow a user to browse or search for pages and insert links to them.

Example¶

Let’s take a look at an example using a site created using the Website Editorial blueprint. We will setup the RTE in the Page - Article content type to allow a user to browse or search for pages and insert links to them. We will first setup the RTE, then see it in action.

  1. Open the content type with the Rich Text Editor (RTE) to be setup. Open the Sidebar and click on siteConfig and select Content Types. Click on Open Existing Type, and select the content type Page - Article then click on the Open Type button.

  2. Setup the data source to select a page from the site. From the content model definition, go to the Data Sources panel and drag File Browse to the the Data Sources section of the form.

    Allow user to browse pages and insert link - add "File Browse" data source

    Fill in the following properties:

    • Title : Pages

    • Name : pages

    • Repository Path : /site/website

    Allow user to browse pages and insert link - data source setup

  3. Bind the data source setup above to the RTE. From the content model definition, click on the RTE Section. Next, go to the Properties Explorer panel and scroll to the File Manager property. Put a check mark on the box next to Pages, the data source previously setup, to bind it to the RTE.

    Allow user to browse pages and insert link - bind the data source to RTE

  4. Click on the Save button.

Let’s now take a look at the data source we setup and bound to the RTE in action.

  1. Preview the article Coffee is Good for Your Health by either opening the Sidebar and navigating to /articles/2016/6/coffee-is-good-for-your-health or, from the Home page, click on the Health category, then click on Coffee is Good for Your Health

  2. Edit the article, then scroll down to the Section

  3. Select a word in the RTE. For our example, let’s highlight the first word, Class, then click on Insert/edit link from the toolbar

    Allow user to browse pages and insert link - select "Class" then click on "Insert/edit link"

  4. Click on the button next to URL then select Pages. This is the data source we setup.

    Allow user to browse pages and insert link - Click on button next to "URL" then click on "Pages"

  5. Select a page to link to. We will link the page /article/2017/2/top-romantic-valentine-movies to the selected text in our RTE

    Allow user to browse pages and insert link - Click on button next to "URL" then click on "Pages"

  6. Save the link.

    Allow user to browse pages and insert link - Save the link"

  7. The link is now setup.

    Allow user to browse pages and insert link - Link created on word "Class" in RTE"

Next Previous