# Creating a simple Rich Text Module

**URL:** <https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [April 13, 2021, 3:01pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440 "2021-04-13T15:01:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 13, 2021, 3:01pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/1 "2021-04-13T15:01:43Z")

</div>

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

```lia-code-sample
<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

```lia-code-sample
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?

---

<div class="post-metadata">

**Author:** ![ConnorSlivensky](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/connorslivensky/32/43106_2.png) [@ConnorSlivensky](https://community.hubspot.com/u/ConnorSlivensky)\
**Post date:** [April 13, 2021, 3:30pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/2 "2021-04-13T15:30:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 13, 2021, 3:35pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/3 "2021-04-13T15:35:09Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![ConnorSlivensky](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/connorslivensky/32/43106_2.png) [@ConnorSlivensky](https://community.hubspot.com/u/ConnorSlivensky)\
**Post date:** [April 13, 2021, 4:12pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/4 "2021-04-13T16:12:11Z")

</div>

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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/74) @bradmin

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 13, 2021, 4:28pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/5 "2021-04-13T16:28:19Z")

</div>

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

example:

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 13, 2021, 4:38pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/6 "2021-04-13T16:38:54Z")

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 13, 2021, 5:14pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/7 "2021-04-13T17:14:41Z")

</div>

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:

```lia-code-sample
 {
 "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

 ![40823i16685A2B8861E7D1.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/a/9a74a7ba95e9528899c32899b632f55fb2744732.png)

---

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 13, 2021, 8:31pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/8 "2021-04-13T20:31:40Z")

</div>

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…

 ![40841i0FD378FD08B247A9.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7f7498ad765127e009095bbb8d1a630c3d97b322.png)

…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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 13, 2021, 9:06pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/9 "2021-04-13T21:06:29Z")

</div>

going to add @Anton in for his 👀

Please see attached gif for my experience using your code.

![40844iC61119784AAE5501.gif](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/8/18d38b4b38430b7e24c706fd7b06996c85b67831.gif)

---

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 14, 2021, 8:07am UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/10 "2021-04-14T08:07:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![John](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/john/32/43512_2.png) [@John](https://community.hubspot.com/u/John)\
**Post date:** [April 14, 2021, 5:38pm UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/11 "2021-04-14T17:38:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tel\_mark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tel_mark/32/30597_2.png) [@tel\_mark](https://community.hubspot.com/u/tel_mark)\
**Post date:** [April 15, 2021, 7:19am UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/12 "2021-04-15T07:19:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [April 16, 2021, 11:25am UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/13 "2021-04-16T11:25:27Z")

</div>

Hi [@tel\_mark](https://community.hubspot.com/t5/user/viewprofilepage/user-id/138430) ,  
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](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.

---

<div class="post-metadata">

**Author:** ![Mritunjay\_chaur](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mritunjay_chaur/32/89259_2.png) [@Mritunjay\_chaur](https://community.hubspot.com/u/Mritunjay_chaur)\
**Post date:** [June 10, 2021, 6:16am UTC](https://community.hubspot.com/t/creating-a-simple-rich-text-module/35440/14 "2021-06-10T06:16:01Z")

</div>

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