5

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

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.

  • 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 Feb 8 '17 at 13:52
  • @Mike No reason not to, and yes that would be smarter :) – Brandon Kelly Feb 27 '17 at 20:04
  • Appreciate the follow up - thanks Brandon! – Mike Feb 28 '17 at 23:32
  • 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 Jun 28 '18 at 15:09
0

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 "$('#jobOverview').redactor();" %}
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.