<p>To do this you'll need to take a few steps:</p>

<ol>
<li><p>Load the necessary resources which include the redactor.css and redactor.js file.  And if you are using Craft's macros for your fields, the form macro file.</p>

<pre><code>{% includeCssResource "lib/redactor/redactor.css" %}
{% includeJsResource "lib/redactor/redactor.js" %}

{% import "_includes/forms" as forms %}
</code></pre></li>
<li><p>Add a class to your field that you will use to initialize your Redactor toolbar.  Here's a simplified textarea macro:</p>

<pre><code>{{ forms.textareaField({
    class: 'myFieldsRedactorClass',
    name: name,
    value: (value is defined) ? value : ''
}) }}
</code></pre></li>
<li><p>Initialize the redactor field type with your desired toolbar.</p>

<pre><code>(function() {
    $('.myFieldsRedactorClass').redactor({
        buttons: ['bold', 'italic'] 
    });
})();
</code></pre></li>
</ol>

<p>Here's a related article on customizing Redactor toolbars from Straight Up Craft:
<a href="http://straightupcraft.com/articles/custom-redactor-toolbars-for-the-rich-text-field-in-craft-cms">Custom Redactor Toolbars for the Rich Text Field in Craft CMS</a></p>

<p><strong>Note:</strong> 
One thing to be mindful of, which I'm not sure what to say about, is that if you have other Rich Text fields in your section with you custom field type, Craft is probably already loading these resources. I don't know if there is some way to check to see if these are loaded and only load the redactor css and js assets if they are not being loaded elsewhere.</p>

CC BY-SA 3.0
2014-06-21T23:55:46.243Z
Craft keeps track of the queued-up JS/CSS resources, so if the same file is included twice in the same request, it will still only get one <script> or <link> tag ;)
Brandon Kelly
CC BY-SA 3.0
2015-09-02T18:02:42.033Z
One further thing I'm not clear about - how do you define a RichText field in your plugin's `defineSettings()` method?
Phil Gyford
CC BY-SA 3.0
2018-04-11T11:12:24.100Z
@PhilGyford You dont have to. The field has to be of type AttributeType::Text and in your settings view you initialize the textArea like Ben posted in JS.
Simon Franzen
CC BY-SA 3.0
2014-06-21T23:24:31.100Z
2014-06-21T23:24:31.100Z
Ben Parizek
<p>I'm trying to add a <a href="http://buildwithcraft.com/docs/rich-text-fields">redactor richtext field</a> to one of my plugin templates in the CP.</p>

<p>I found macros for every field in <code>craft/app/templates/_includes/forms</code>, but a richtext macro is missing. I assume that I have to use a normal textarea-field and add some code to the controller or <code>init()</code>-function, but couldn't find anything by inspecting Craft's CP code.</p>

<templating><plugin-development><fieldtypes><control-panel>
How can I add a RichText-Field to my plugin's CP-section?
# How can I add a RichText-Field to my plugin's CP-section?

(Asked by: username_0 on 2014-06-21)

I'm trying to add a [redactor richtext field](http://buildwithcraft.com/docs/rich-text-fields) to one of my plugin templates in the CP.

I found macros for every field in `craft/app/templates/_includes/forms`, but a richtext macro is missing. I assume that I have to use a normal textarea-field and add some code to the controller or `init()`-function, but couldn't find anything by inspecting Craft's CP code.

**Tags:** templating, plugin-development, fieldtypes, control-panel

---

## 1 answers

### Answer by username_1 on 2014-06-21. Score: 13 | Accepted answer

To do this you'll need to take a few steps:

Load the necessary resources which include the redactor.css and redactor.js file.  And if you are using Craft's macros for your fields, the form macro file.
{% includeCssResource "lib/redactor/redactor.css" %}
{% includeJsResource "lib/redactor/redactor.js" %}

{% import "_includes/forms" as forms %}

Add a class to your field that you will use to initialize your Redactor toolbar.  Here's a simplified textarea macro:
{{ forms.textareaField({
    class: 'myFieldsRedactorClass',
    name: name,
    value: (value is defined) ? value : ''
}) }}

Initialize the redactor field type with your desired toolbar.
(function() {
    $('.myFieldsRedactorClass').redactor({
        buttons: ['bold', 'italic'] 
    });
})();


Here's a related article on customizing Redactor toolbars from Straight Up Craft:
Custom Redactor Toolbars for the Rich Text Field in Craft CMS
Note: 
One thing to be mindful of, which I'm not sure what to say about, is that if you have other Rich Text fields in your section with you custom field type, Craft is probably already loading these resources. I don't know if there is some way to check to see if these are loaded and only load the redactor css and js assets if they are not being loaded elsewhere.

> **Comments:**
> **username_2**: Craft keeps track of the queued-up JS/CSS resources, so if the same file is included twice in the same request, it will still only get one <script> or <link> tag ;)  
> **username_3**: One further thing I'm not clear about - how do you define a RichText field in your plugin's `defineSettings()` method?  
> **username_4**: @PhilGyford You dont have to. The field has to be of type AttributeType::Text and in your settings view you initialize the textArea like Ben posted in JS.  

---

