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?
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?
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!
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
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>
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.
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
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
going to add @Anton in for his
Please see attached gif for my experience using your code.
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…
https://www.youtube.com/watch?v=jCCUXYgu4aw
…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
April 14, 2021, 5:38pm
11
I’ll save you some time. That functionality is not present in custom module rich text editors
Thank you - at least I shan’t keep trying now!
system
April 16, 2021, 11:25am
13
Hi @tel_mark ,https://www.loom.com/share/ad87dc1582854a439b932fe828655a70
{% module ‘content’@hubspot /rich_text’,
’
