Creating a simple Rich Text Module

SOLVE
tel_mark
Participant

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?

0 Upvotes
1 Accepted solution

Accepted Solutions
John
Solution
Top Contributor | Platinum Partner

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



Will you please help the community and give me some street cred by marking my answer as a solution if helped you? I'm fixing to buy a minivan and my cool points are running low.

Curious cats can find me at Ascend Inbound Marketing

View solution in original post

13 Replies 13
Huble_Connor
Key Advisor | Elite Partner

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?



Connor Slivensky
HubSpot Implementation Specialist

Huble Digital | www.hubledigital.com

P: +1 (312) 488-9710


Learn More...
Powered by Terminus
tel_mark
Participant

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!

0 Upvotes
Huble_Connor
Key Advisor | Elite Partner

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 



Connor Slivensky
HubSpot Implementation Specialist

Huble Digital | www.hubledigital.com

P: +1 (312) 488-9710


Learn More...
Powered by Terminus
dennisedson
Community Manager

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>
Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
tel_mark
Participant

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.

0 Upvotes
dennisedson
Community Manager

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

Design_Manager___HubSpot.png

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
tel_mark
Participant

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....

tel_mark_0-1618345760883.png

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

tel_mark_1-1618345873065.png

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

 

0 Upvotes
dennisedson
Community Manager

going to add @Anton in for his 👀

Please see attached gif for my experience using your code. 

rte.gif

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
tel_mark
Participant

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.

0 Upvotes
John
Solution
Top Contributor | Platinum Partner

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



Will you please help the community and give me some street cred by marking my answer as a solution if helped you? I'm fixing to buy a minivan and my cool points are running low.

Curious cats can find me at Ascend Inbound Marketing

View solution in original post

tel_mark
Participant

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

webdew
Top Contributor | Diamond Partner

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
Member

{% 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

0 Upvotes