Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-27T20:04:05.603Z
Answers.Text: @Mike No reason not to, and yes that would be smarter :)
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-28T23:32:49.950Z
Answers.Text: Appreciate the follow up - thanks Brandon!
Answers.UserDisplayName: Mike
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-08T13:52:54.137Z
Answers.Text: 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.
Answers.UserDisplayName: Mike
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-06-28T15:09:20.457Z
Answers.Text: 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!
Answers.UserDisplayName: Andrea DeMers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-20T23:40:30.033Z
Answers.LastActivityDate: 2017-02-27T20:04:43.357Z
Answers.LastEditDate: 2017-02-27T20:04:43.357Z
Answers.UserDisplayName: Brandon Kelly
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-03-11T11:25:15.947Z
Answers.LastActivityDate: 2020-05-21T14:55:15.250Z
Answers.LastEditDate: 2020-05-21T14:55:15.250Z
Answers.UserDisplayName: 77120
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-03-24T00:12:29.923Z
Answers.Text: 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.
Answers.UserDisplayName: littlered
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-25T15:34:45.023Z
Answers.LastActivityDate: 2021-03-25T15:34:45.023Z
Answers.UserDisplayName: mrozema
Body: <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>
  
Tags: <entries><form><redactor>
Title: How do I enable redactor rich text editor in a front-end form?
ThreadText: # 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:
  
  ```
  <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>
  
  ```
  
  **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:
  
  ```html
  {% 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.
  
  > **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 username_1!  
  > **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')) -%}
  
  <textarea id="jobOverview" name="fields[jobOverview]"></textarea>
  {% 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.  
  
  ---
  
  