We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Apr 13, 2021 11:01 AM
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?
Solved! Go to Solution.
Apr 14, 2021 1:38 PM
I'll save you some time. That functionality is not present in custom module rich text editors
I like kudos almost as much as cake – a close second.
Jun 10, 2021 2:16 AM
{% 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
Apr 16, 2021 7:25 AM
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.
Apr 14, 2021 1:38 PM
I'll save you some time. That functionality is not present in custom module rich text editors
I like kudos almost as much as cake – a close second.
Apr 15, 2021 3:19 AM
Thank you - at least I shan't keep trying now!
Apr 14, 2021 4:07 AM
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.
Apr 13, 2021 12:12 PM
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.
Apr 13, 2021 12:28 PM
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>
Apr 13, 2021 12:38 PM
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.
Apr 13, 2021 1:14 PM
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
Apr 13, 2021 4:31 PM
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
Apr 13, 2021 5:06 PM
Apr 13, 2021 11:30 AM
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?
Apr 13, 2021 11:35 AM - edited Apr 13, 2021 11:35 AM
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!