Creating a simple Rich Text Module

[tel_mark]

I am literally tearing my hair out.

I just want to create a simple rich text module in a simple theme which allows me to edit the content in the expanded editor just like the standard 'Rich Text' module.

I've created a module in the theme called 'feature-box'.

There are two field for background_color and border_radius which work fine in the CSS.

module.html

<div class="feature-box" id="{{ name }}">
  {% module_block rich_text "content" overrideable=True, label="Content" %}
    {% module_attribute "html" %}
      <p>Default Content</p>
    {% end_module_attribute %}
  {% end_module_block %}
</div>

{% require_css %}
<style>
  #{{ name }}{
    border-radius:{{ module.border_radius }}px;
    background-color:{{ module.background_color.color }};
    opacity:{{ module.background_color.opacity }};
  }
</style>
{% end_require_css %}

 module.css

div.feature-box{
  width:100%;
  margin:20px auto;
  padding:20px;
}
div.feature-box p{
  margin-bottom:0px;
}

So, I can use another field for the rich text which works ok but the editor displays by default in the options panel and I want it to display and behave like the standard rich_text module.

The "<p>Default Content</p>" is not editable.

It's taken me all day to get to this! Can someone help me please?

[Huble_Connor]

Hey Mark,

I may have missed it but is there a reason you can't use the standard RTE and style the default one with CSS as you've done here?

[tel_mark]

Hi Connor - thanks for your reply.

It's mainly for speed of adding the custom module for other staff.

We make a lot of pages which look similar and I end up spending time styling them manually.

Oh, and also, I don't understand why I can't do it! It can't be this difficult!

[Huble_Connor]

I would think a template/CSS sheet combo(s) staff could apply depending on what they need may be the easiest/quickest repeatable option available.

That being said I'm not a coder beyond hexcodes and a tags so I'll tag a couple people that maybe able to help on that side of it.

@Phil_Vallender @bradmin 

[dennisedson]

Not to jump on anyone's toes here, but I believe if you replace "module" with "widget", you should be set

example:

<div class="feature-box" id="{{ name }}">
{% widget_block rich_text "rte" overrideable=True, label='TYpe stuff'  %}
    {% widget_attribute "html" %}
           <p>Default Content</p>
    {% end_widget_attribute %}
{% end_widget_block %}
</div>

[tel_mark]

No toes tredded on as far as I am concerned!

However, it still doesn't work. The text is not editable.

I read that widget is deprecated and we should use module now.

[dennisedson]

Oh wait.  I missed the part about this is going into a module.

Pretty sure you can't do that.  You could add it to a page html file with no issue. 

If you are building a module locally, you would edit the fields.json file

Would look like this:

  {
    "default": "<h1>Hello, world!</h1>",
    "label": "Rich text field",
    "locked": false,
    "name": "text",
    "required": false,
    "type": "richtext",
    "validation_regex": ""
  }

If you are doing it via the Design Manager, you would add the RTE field and then add your default content

 

[tel_mark]

Thanks - I managed to do that but I wanted to know how to make it editable like the global rich text field rather than in the side panel as a field.

I can make it do this....

...but I want it to do this...

i.e. I want the text to be editable actually in the page rather than in the left panel

[dennisedson]

going to add @Anton in for his 👀

Please see attached gif for my experience using your code. 

 

[tel_mark]

Thanks for the efforts you are going to to to solve this 😍

I wonder whether I'm just being pendantic.

This is what I mean...

...you can edit in the expanded editor, no problem, but I thought that it would show the in-page editor like the global rte module.

[John · Accepted solution]

I'll save you some time. That functionality is not present in custom module rich text editors

[tel_mark]

Thank you - at least I shan't keep trying now!

[webdew]

Hi @tel_mark ,

Sharing a video, pl try to follow the steps to create the custom rich text module.
We cannot edit default rich text.
Video: https://www.loom.com/share/ad87dc1582854a439b932fe828655a70

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[Mritunjay_chaur]

{% module 'content'
path='@hubspot/rich_text',
html='<h5>INTRODUCING GROWTH</h5>
<h2>Growth Template <br>The perfect amount of everything</h2>

'
%}
If you use above snippet, then can edit content