<p>It’s technically possible to include Craft’s copy of Redactor on the front end:</p>

<pre class="lang-html prettyprint-override"><code>{% includeJsResource "lib/redactor/redactor.js" %}
{% includeCssResource "lib/redactor/redactor.css" %}

&lt;textarea id="jobOverview" name="fields[jobOverview]"&gt;&lt;/textarea&gt;
{% includeJs "$('#jobOverview').redactor();" %}
...
</code></pre>

<p>But it’s <strong>not recommended</strong>. Redactor’s API and config settings frequently change, and we generally try to keep it updated with each new Craft version. If you started including Craft’s version of Redactor, you’re going to have to start testing your website to make sure your front-end Redactor fields are still working properly each time you update Craft to a new version.</p>

<p><del>(I’m also not sure about the legal implications. Craft comes with a Developer license of Redactor which gives <em>us</em> unlimited use of it, but whether or not end users of Craft are allowed to use it is a gray area you should check with Imperavi on.)</del></p>

<p>You’ll be better off in the long run by grabbing your own copy of Redactor and installing it yourself for the front end site.</p>

<p><strong>Update:</strong></p>

<p>We checked with Imperavi and the Developer license we purchased for Craft is allowed to be used on the front and back-end of Craft, although we still don't recommend it for the reasons listed above.</p>

CC BY-SA 3.0
2017-02-27T20:04:05.603Z
@Mike No reason not to, and yes that would be smarter :)
Brandon Kelly
CC BY-SA 3.0
2017-02-28T23:32:49.950Z
Appreciate the follow up - thanks Brandon!
Mike
CC BY-SA 3.0
2017-02-08T13:52:54.137Z
Just curious if anyone is looking at this still... any reason we couldn't include our own front end copy of Redactor instead of using Craft's? That would seem cleaner.
Mike
CC BY-SA 4.0
2018-06-28T15:09:20.457Z
How can I do this in Craft 3? I saw the docs about Asset Bundles. Does one exist for Redactor, or would I have to create one? Should I create a new SE question for Craft 3? Thanks!
Andrea DeMers
CC BY-SA 3.0
2014-10-20T23:40:30.033Z
2017-02-27T20:04:43.357Z
2017-02-27T20:04:43.357Z
Brandon Kelly
<p>For Craft 3 you can use:</p>

<pre><code>{%- do view.registerJsFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.js')) -%}
{%- do view.registerCssFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.css')) -%}

&lt;textarea id="jobOverview" name="fields[jobOverview]"&gt;&lt;/textarea&gt;
{% includeJs "$R('#jobOverview');" %}
...
</code></pre>

CC BY-SA 4.0
2019-03-11T11:25:15.947Z
2020-05-21T14:55:15.250Z
2020-05-21T14:55:15.250Z
77120
<p>Redactor has an Asset Bundle for those assets, so you can do:</p>
<pre><code>{% do view.registerAssetBundle(&quot;craft\\redactor\\assets\\redactor\\RedactorAsset&quot;) %}
</code></pre>
<p>and this will add the script/link tags for the css/js on your document. Then just use the <code>$R(...)</code> js in your template to apply Redactor to your text fields.</p>

CC BY-SA 4.0
2022-03-24T00:12:29.923Z
I just upgraded a site from 3.4->3.7 and I needed to update my redactor include from above to this in order to work on a frontend form.
littlered
CC BY-SA 4.0
2021-03-25T15:34:45.023Z
2021-03-25T15:34:45.023Z
mrozema
<p>I have a front-end form for registered users to submit entries, however I'd like to have a WYSIWYG editor like the dashboard. How would I get redactor working with this form?</p>

<p>My form:</p>

<pre><code>&lt;form method="post" action="j" accept-charset="UTF-8"&gt;
        &lt;input type="hidden" name="action" value="entries/saveEntry"&gt;
        &lt;input type="hidden" name="redirect" value="/"&gt;
        &lt;input type="hidden" name="sectionId" value="3"&gt;
        &lt;input type="hidden" name="enabled" value="1"&gt;

        &lt;label for="title"&gt;Title&lt;/label&gt;
        &lt;input id="title" type="text" name="title"&gt;

         {% set jobTypeDropdown = craft.fields.getFieldbyHandle('jobType') %}
        &lt;label for="fields[jobType]"&gt;Job Type&lt;/label&gt;
        &lt;select name="fields[jobType]"&gt;
            {% for option in jobTypeDropdown.settings.options %}
                &lt;option value="{{ option.value }}"&gt;{{ option.label }}&lt;/option&gt;
            {% endfor %}
        &lt;/select&gt;

        {% set jobCategoryDropdown = craft.fields.getFieldbyHandle('jobCategory') %}
        &lt;label for="fields[jobCategory]"&gt;Job Category&lt;/label&gt;
        &lt;select name="fields[jobCategory]"&gt;
            {% for option in jobCategoryDropdown.settings.options %}
                &lt;option value="{{ option.value }}"&gt;{{ option.label }}&lt;/option&gt;
            {% endfor %}
        &lt;/select&gt;

        {% set jobStateDropdown = craft.fields.getFieldbyHandle('jobState') %}
        &lt;label for="fields[jobState]"&gt;Job State&lt;/label&gt;
        &lt;select name="fields[jobState]"&gt;
            {% for option in jobStateDropdown.settings.options %}
                &lt;option value="{{ option.value }}"&gt;{{ option.label }}&lt;/option&gt;
            {% endfor %}
        &lt;/select&gt;

        &lt;label for="field[jobCity]"&gt;Job City&lt;/label&gt;
        &lt;input type="text" name="fields[jobCity]"&gt;

        &lt;label for="field[jobOverview]"&gt;Job Overview&lt;/label&gt;
        &lt;textarea id="jobOverview" name="fields[jobOverview]"&gt;&lt;/textarea&gt;

        &lt;label for="field[jobDescription]"&gt;Job Description&lt;/label&gt;
        &lt;textarea id="jobDescription" name="fields[jobDescription]"&gt;&lt;/textarea&gt;

        &lt;label for="field[howToApply]"&gt;How to Apply&lt;/label&gt;
        &lt;textarea id="howToApply" name="fields[howToApply]"&gt;&lt;/textarea&gt;

         &lt;button class="button login-btn" type="submit"&gt;Post Job&lt;/button&gt;
    &lt;/form&gt;
</code></pre>

<entries><form><redactor>
How do I enable redactor rich text editor in a front-end form?
# How do I enable redactor rich text editor in a front-end form?

(Asked by: username_0 on 2014-10-20)

I have a front-end form for registered users to submit entries, however I'd like to have a WYSIWYG editor like the dashboard. How would I get redactor working with this form?
My form:

        
        
        
        

        Title
        

         {% set jobTypeDropdown = craft.fields.getFieldbyHandle('jobType') %}
        Job Type
        
            {% for option in jobTypeDropdown.settings.options %}
                {{ option.label }}
            {% endfor %}
        

        {% set jobCategoryDropdown = craft.fields.getFieldbyHandle('jobCategory') %}
        Job Category
        
            {% for option in jobCategoryDropdown.settings.options %}
                {{ option.label }}
            {% endfor %}
        

        {% set jobStateDropdown = craft.fields.getFieldbyHandle('jobState') %}
        Job State
        
            {% for option in jobStateDropdown.settings.options %}
                {{ option.label }}
            {% endfor %}
        

        Job City
        

        Job Overview
        

        Job Description
        

        How to Apply
        

         Post Job

**Tags:** entries, form, redactor


---

## 3 answers

### Answer by username_1 on 2014-10-20. Score: 11

It’s technically possible to include Craft’s copy of Redactor on the front end:
{% includeJsResource "lib/redactor/redactor.js" %}
{% includeCssResource "lib/redactor/redactor.css" %}


{% includeJs "$('#jobOverview').redactor();" %}
...

But it’s not recommended. Redactor’s API and config settings frequently change, and we generally try to keep it updated with each new Craft version. If you started including Craft’s version of Redactor, you’re going to have to start testing your website to make sure your front-end Redactor fields are still working properly each time you update Craft to a new version.
(I’m also not sure about the legal implications. Craft comes with a Developer license of Redactor which gives us unlimited use of it, but whether or not end users of Craft are allowed to use it is a gray area you should check with Imperavi on.)
You’ll be better off in the long run by grabbing your own copy of Redactor and installing it yourself for the front end site.
Update:
We checked with Imperavi and the Developer license we purchased for Craft is allowed to be used on the front and back-end of Craft, although we still don't recommend it for the reasons listed above.

> **Comments:**
> **username_2**: Just curious if anyone is looking at this still... any reason we couldn't include our own front end copy of Redactor instead of using Craft's? That would seem cleaner.  
> **username_1**: @username_2 No reason not to, and yes that would be smarter :)  
> **username_2**: Appreciate the follow up - thanks Brandon!  
> **username_3**: How can I do this in Craft 3? I saw the docs about Asset Bundles. Does one exist for Redactor, or would I have to create one? Should I create a new SE question for Craft 3? Thanks!  

---

### Answer by username_4 on 2019-03-11. Score: 4

For Craft 3 you can use:
{%- do view.registerJsFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.js')) -%}
{%- do view.registerCssFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.css')) -%}


{% includeJs "$R('#jobOverview');" %}
...


---

### Answer by username_5 on 2021-03-25. Score: 2

Redactor has an Asset Bundle for those assets, so you can do:
{% do view.registerAssetBundle("craft\\redactor\\assets\\redactor\\RedactorAsset") %}

and this will add the script/link tags for the css/js on your document. Then just use the $R(...) js in your template to apply Redactor to your text fields.

> **Comments:**
> **username_6**: I just upgraded a site from 3.4->3.7 and I needed to update my redactor include from above to this in order to work on a frontend form.  

---

