How do I enable redactor rich text editor in a front-end form?

Question

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:

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

        <label for="title">Title</label>
        <input id="title" type="text" name="title">

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

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

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

        <label for="field[jobCity]">Job City</label>
        <input type="text" name="fields[jobCity]">

        <label for="field[jobOverview]">Job Overview</label>
        <textarea id="jobOverview" name="fields[jobOverview]"></textarea>

        <label for="field[jobDescription]">Job Description</label>
        <textarea id="jobDescription" name="fields[jobDescription]"></textarea>

        <label for="field[howToApply]">How to Apply</label>
        <textarea id="howToApply" name="fields[howToApply]"></textarea>

         <button class="button login-btn" type="submit">Post Job</button>
    </form>

Answer 1

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" %}

<textarea id="jobOverview" name="fields[jobOverview]"></textarea>
{% 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.

Answer 2

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')) -%}

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

Answer 3

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.