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,
                        autoRefresh:true

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

        });
})(jQuery);

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'] : '';

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,
                        autoRefresh:true

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

        });
})(jQuery);

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'] : '';

• jquery
• javascript

• What's the update method of your widget? – Jacob Peattie Commented Dec 30, 2018 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 Commented Dec 30, 2018 at 14:43

3 Answers 3

did you try :

1) to wrap javascript in CDATA ?

<script>
//<![CDATA[
    alert('1');
//]]>
</script>

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

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());

I was looking for such a thing. This can be useful for you:

https://wpreset/add-codemirror-editor-plugin-theme/