CODEWITHSUNDEEP
javascriptjquerycodemirror
AlexW
AlexW

Reputation: 2591

CodeMirror - insert text into editor when there are multiple editors

I have two codemirror editors on one page. A drop down list of items and radio group to target the correct editor.

What I want to do is on change of the drop down list insert the value of the item into the targeted editor (deleted by the radio group).

my code is as below: however the function isnt working. When I alert the item value and the target I get expected results, however the function to insert the text is failing:

<script type="text/javascript"> 
    function editor(id) {
            var editor = CodeMirror.fromTextArea(id, {
                continuousScanning: 500,
                lineNumbers: true
            });
            editor.setSize(null, 550);
        }
    var config_id = document.getElementById('id_config')
    var config = editor(config_id);
    var remote_config_id = document.getElementById('id_remote_config')
    var remote_config = editor(remote_config_id);

    function insertStringInTemplate(str, target)    {
        if (target== "id_config") {
            var doc = config
        } else {
            var doc = remote_config
        }
            var cursor = doc.getCursor();
            var pos = {
                line: cursor.line,
                ch: cursor.ch
            }
            doc.replaceRange(str, pos);
        }

    $(function(){
        // bind change event to select
        $('#template_vars').on('change', function () {
            var var_data = $(this).val(); // get selected value
            var var_target = $('input[name=target]:checked').val();
            insertStringInTemplate(var_data, var_target)
            return false;
        });
    });
    $("#template_vars").chosen({no_results_text: "Oops, nothing found!"}); 
</script>

Upvotes: 1

Views: 1301

Answers (1)

Sally CJ
Sally CJ

Reputation: 15620

however the function to insert the text is failing

That function (i.e. insertStringInTemplate()) is working good/properly; however, the problem is with the editor() function, where you forgot to return the editor (i.e. the CodeMirror instance).

So a simple fix would be:

    function editor(id) {
            var editor = CodeMirror.fromTextArea(id, {
                continuousScanning: 500,
                lineNumbers: true
            });
            editor.setSize(null, 550);
            return editor; // <- here's the fix
        }

Demo on CodePen.

However in that demo, I added an if block to the insertStringInTemplate() function, as in the following code:

    function insertStringInTemplate(str, target)    {
        if (target== "id_config") {
            var doc = config
        } else {
            var doc = remote_config
        }

        // If there's a selection, replace the selection.
        if ( doc.somethingSelected() ) {
          doc.replaceSelection( str );
          return;
        }

        // Otherwise, we insert at the cursor position.
            var cursor = doc.getCursor();
            var pos = {
                line: cursor.line,
                ch: cursor.ch
            }
            doc.replaceRange(str, pos);
        }

Upvotes: 1

Related Questions