I'm currently using this code within my plugin on a custom widgets textarea to enable codemirror.

(function ($) {
        $(document).ready( function(){
              var coinmedi_es_<?php echo $wid_id; ?> = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {};
                coinmedi_es_<?php echo $wid_id; ?>.codemirror = _.extend(
                    coinmedi_es_<?php echo $wid_id; ?>.codemirror,
                        mode: 'htmlmixed',
                        lineNumbers: true,
                        indentUnit: 2,
                        tabSize: 2,

            var cm_editor_<?php echo $wid_id; ?> = wp.codeEditor.initialize($('#<?php echo $textarea_id; ?>') , coinmedi_es_<?php echo $wid_id; ?> );

            $(document).on('keyup', '.CodeMirror-code', function(){
                $('#<?php echo $textarea_id; ?>').html(cm_editor_<?php echo $wid_id; ?>.codemirror.getValue());
                $('#<?php echo $textarea_id; ?>').trigger('change');


Everything is working fine for HTML but when I try to add javascript eg.

<script> alert('1') </script>

It accepts the javascript and highlights as it should but when I click the save button nothing is posted for this textarea. When I remove the javascript it saves as it should. Where am I going wrong, I can't seem to pinpoint why it's not saving. Any help would be appreciated.

Edit: Update method

$instance['ad-code'] = ( ! empty( $new_instance['ad-code'] ) ) ? $new_instance['ad-code'] : '';
  • What's the update method of your widget? – Jacob Peattie Dec 30 '18 at 14:38
  • Added the line for the update method, problem is it doesn't get that far because the data that is sent is blank on the field whenever JS is added, if I remove the JS it works fine. – Second2None Dec 30 '18 at 14:43

did you try :

1) to wrap javascript in CDATA ?


2) change mode to javascript (instead of mode: 'htmlmixed')

  • Still clears unfortunately. – Second2None Jan 2 at 23:09
  • @Second2None I've updated the answer, with second possible solution. – T.Todua Jan 3 at 7:50
  • Sorry mate no luck, it accepts basic javascript(var test = 'test';) but not imported scripts or html (which is why I was using htmlmixed). I assume I'm missing some sort of javascript check / function that is clearing codemirror on possible disallowed html / js. I'm just not sure where. – Second2None Jan 3 at 8:13

The problem came down to using .html and injecting html directly into Codemirror, specifically this line:

$('#<?php echo $textarea_id; ?>').html(cm_editor_<?php echo $wid_id; ?>.codemirror.getValue());

Changing this to .text corrected the issue by encoding the html / js

$('#<?php echo $textarea_id; ?>').text(cm_editor_<?php echo $wid_id; ?>.codemirror.getValue());

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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