@richtext

Elements Component Development
1

I make use of @richtext in a component and noticed that since I updated Elements it seems to have stopped working.

In the template I have

@richtext("slrichtext", default: "Enter text here")

and in hooks I have

  const {
    slrichtext,
  } = rw.props;

It now seems that slrichtext is returning null. Have there been any changes?

2

Hi @vibralogix

You can’t get the contents of a @richtext() directive from within the hook.js file.

If you could share your use-case I might be able to offer an alternative approach :slight_smile:

3

That’s odd as it has been working fine until a recent update. Just luck I guess.

The way I was using it was to allow rich text to be added to the page which could contain ‘variables’ which get replaced with actual data.

So for example I would get the rich text contents and replace !!!username!!! with the code used to insert the username. It has been working really well until I updated.

The main reason for needing to do this is to allow data to be inserted directly within text. This is something Rapidweaver Classic supports well (using ignore formatting) but Elements doesn’t. In elements I can only have the username inserted in a block by itself on the page but not within text.

Having access to the contents of the richtext again would be really useful.

4

I am doing exactly this in the CMS components I’m building — I’m using Twig in my templates.

I wrap the template contents in PHP, and then pass that to Twig to render.

Basic example:

@portal(pageStart, includeOnce: true)
<?php
// include twig / other required functions

if (!function_exists('renderTemplate')) {
    function renderTemplate($template, $variables = [])
    {
        global $twig;
        return $twig->createTemplate($template)->render($variables);
    }
}
?>
@endportal

<?php
  $data = [] // setup your data...
  ob_start();
?>

    @richtext("myContent")

<?php
  $template = ob_get_clean();
    echo renderTemplate($template, ['data' => $data]);
?>

This setup allows the user to use the Twig syntax directly in Elements. Checkout one of my latest CMS videos for an example of this in action.

5

Thanks Ben. That sounds like a good way to handle situations like this. I have never used Twig before so will take a closer look.

1 Like
6

I finally have some time to look at this now. I am confused about $twig though. Does elements setup $twig internally or do I need to do something further? Do you have an example of including twig? I had a read through the Twig docs which make sense but not sure how to include it in the page.

7

No, not out of the box. Your component needs to handle its own dependencies.

The way I am doing it is by adding dependencies to my pack’s components/shared/assets folder — then I include those files as needed in my component.

There’s nothing fancy going on.

You can get the shared assets path in your component’s hooks.js file like so:

const { sharedAssetPath } = rw.component;

that’ll give you the published path to the components/shared/assets folder, so in your template you can do something like this:

<?php
require_once __DIR__ . '/{{sharedAssetPath}}/some_file.php';
?>

So some_file.php would be located in you-pack.elementsdevpack/components/shared/assets/some_file.php

Hope that helps :slight_smile:

8

Hi Ben,

Thanks. That all seems to be working well. Using Twig may allow some more things to be done too.

I have another question regarding the pageStart portal but I will start a new thread for that.

1 Like