<p><strong>Adding Code Mirror to a Redactor field is a bad idea.</strong></p>

<p>The entire point of a WYSIWYG field is to allow a content editor to easily format text to be displayed on the front-end. Conversely, the entire point of Code Mirror is to colorize a snippet of code. It's hard to imagine a use-case where you'd want to colorize the value of your WYSIWYG.</p>

<p>Instead, I'd recommend using a plugin like <a href="https://github.com/httpster/Ace-Freely/" rel="nofollow">Ace Freely</a> to store code snippets. This will allow you to easily view your code snippet in the control panel, <em>without</em> giving it unnecessary paragraph tags and awkward spacing.</p>

<p>You can then apply Code Mirror on the front-end to render a colorized version of that code snippet.</p>

CC BY-SA 3.0
2016-09-26T23:32:15.277Z
TLDR; use a custom field for that (but that doesn't explain the why... ;) ) As an aside, for those folks coming from say  WordPress land where you're encouraged to shove everything into one field and try to style accordingly, behold the power of Craft's Matrix. Then you can mix and match WYSIWG fields with code fields, assets, whatever you want. It's really the only way to stay sane.
RitterKnight
CC BY-SA 3.0
2016-09-28T08:56:11.627Z
+1 for Ace Freely, it works pretty well.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-09-26T17:06:20.227Z
2016-09-26T17:06:20.227Z
Lindsey D
<p>I'm getting a <code>nn</code> string when I just click on HTML (code mirror),
is there a bug from redactor ?</p>

<p>I have put in hide function of Redactor these lines of code:</p>

<pre><code>code = code.replace('nn&lt;/p&gt;', "&lt;/p&gt;");
code = code.replace('&lt;p&gt;n&lt;span', "&lt;p&gt;&lt;span");
code = code.replace('&lt;/span&gt;nn&lt;p', "&lt;/span&gt;&lt;p");
code = code.replace('&lt;p&gt;n&lt;/p&gt;', "");
code = code.replace('&lt;p&gt;&lt;br /&gt;&lt;/p&gt;', "");`
</code></pre>

<p>Is there another solution?</p>

<p>Thanks in advance.</p>

CC BY-SA 3.0
2016-09-23T19:01:05.473Z
Are you trying to implement Code Mirror on the front end? Or in the control panel?
Lindsey D
CC BY-SA 3.0
2016-09-26T08:36:41.400Z
I'm integrating code mirror with redactor, i just add 'codemirror' to plugins in redactor... is in front end
Carlos Vieira
CC BY-SA 3.0
2016-09-26T16:56:57.497Z
Hmm, I'm not sure that answered my question. Regardless, I will attempt to answer it.
Lindsey D
<redactor>
Redactor 2 integration with code mirror
# Redactor 2 integration with code mirror

(Asked by: username_0 on 2016-09-23)

I'm getting a nn string when I just click on HTML (code mirror),
is there a bug from redactor ?
I have put in hide function of Redactor these lines of code:
code = code.replace('nn', "");
code = code.replace('nnnn', "");
code = code.replace('', "");`

Is there another solution?
Thanks in advance.

**Tags:** redactor

> **Comments:**
> **username_1**: Are you trying to implement Code Mirror on the front end? Or in the control panel?  
> **username_0**: I'm integrating code mirror with redactor, i just add 'codemirror' to plugins in redactor... is in front end  
> **username_1**: Hmm, I'm not sure that answered my question. Regardless, I will attempt to answer it.  

---

## 1 answers

### Answer by username_1 on 2016-09-26. Score: 3

**Adding Code Mirror to a Redactor field is a bad idea.**

The entire point of a WYSIWYG field is to allow a content editor to easily format text to be displayed on the front-end. Conversely, the entire point of Code Mirror is to colorize a snippet of code. It's hard to imagine a use-case where you'd want to colorize the value of your WYSIWYG.

Instead, I'd recommend using a plugin like [Ace Freely](https://github.com/httpster/Ace-Freely/) to store code snippets. This will allow you to easily view your code snippet in the control panel, *without* giving it unnecessary paragraph tags and awkward spacing.

You can then apply Code Mirror on the front-end to render a colorized version of that code snippet.

> **Comments:**
> **username_2**: TLDR; use a custom field for that (but that doesn't explain the why... ;) ) As an aside, for those folks coming from say  WordPress land where you're encouraged to shove everything into one field and try to style accordingly, behold the power of Craft's Matrix. Then you can mix and match WYSIWG fields with code fields, assets, whatever you want. It's really the only way to stay sane.  
> **username_3**: +1 for Ace Freely, it works pretty well.  

---

