How to use CodeMirror inside modal dialog

1

I want to display sql Script in modal dialog (partial view ) but no function work

My Partial View :

My View :

<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/tern/tern.js"></script>
<script src="//ternjs.net/node_modules/acorn/dist/acorn.js"></script>
<script src="//ternjs.net/node_modules/acorn/dist/acorn_loose.js"></script>
<script src="//ternjs.net/node_modules/acorn/dist/walk.js"></script>
<script src="//ternjs.net/doc/demo/polyfill.js"></script>
<script src="//ternjs.net/lib/signal.js"></script>
<script src="//ternjs.net/lib/tern.js"></script>
<script src="//ternjs.net/lib/def.js"></script>
<script src="//ternjs.net/lib/comment.js"></script>
<script src="//ternjs.net/lib/infer.js"></script>
<script src="//ternjs.net/plugin/doc_comment.js"></script>

 function FormuleSQL() {   
        var mime = 'text/x-sql';
        $('#fenetre1').on('shown.bs.modal', function () {   
            var textArea = document.getElementById('code');
            editor = CodeMirror.fromTextArea(textArea, {
                mode: { name: mime, globalVars: true },
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets: true,
                autoRefresh: true,
                autofocus: true,
                validationEvent: true
            });

            function getURL(url, c) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState != 4) return;
                    if (xhr.status < 400) return c(null, xhr.responseText);
                    var e = new Error(xhr.responseText || "No response");
                    e.status = xhr.status;
                    c(e);
                };
            }

            var server;
            getURL("//ternjs.net/defs/ecmascript.json", function (err, code) {
                if (err) throw new Error("Request for ecmascript.json: " + err);
                server = new CodeMirror.TernServer({ defs: [JSON.parse(code)] });
                editor.setOption("extraKeys", {
                    "Ctrl-Space": function (cm) { server.complete(cm); },
                    "Ctrl-I": function (cm) { server.showType(cm); },
                    "Ctrl-O": function (cm) { server.showDocs(cm); },
                    "Alt-.": function (cm) { server.jumpToDef(cm); },
                    "Alt-,": function (cm) { server.jumpBack(cm); },
                    "Ctrl-Q": function (cm) { server.rename(cm); },
                    "Ctrl-.": function (cm) { server.selectName(cm); }
                })
                editor.on("cursorActivity", function (cm) { server.updateArgHints(cm); });
            });

        });
    }

function EditSql() {
        var adrSQL = '@Url.Action("_EditSQL/", "TypeActe")';
        var titre = vmd1.TAC_DES_FR();
        $('#fenetre1').find('.modal-header').html('<span style="font-size:16px;"><strong>' + titre + '</strong></span> <div class="btn-group pull-right"> <button data-bind="click: $root.Annuler" title="@RESOURCES00.PRH_00_00005" class="btn btn-outline btn-sm"><i class="glyphicon glyphicon-refresh text-primary"></i></button> <button data-bind="click: $root.Save" title="@RESOURCES00.PRH_00_00009" class="btn btn-outline btn-sm"><i class="glyphicon glyphicon-floppy-disk text-primary"></i></button><button data-bind="click: $root.Valider" title="Valider" class="btn btn-outline btn-sm"><i class="glyphicon glyphicon-ok text-success"></i></button></div>');
        $('#fenetre1').find('.modal-body').load(adrSQL, function (data) {
            if (!$('#fenetre1').hasClass('in')) {
                Ouvrir();
                FormuleSQL();
                document.getElementById("code").value = vmd1.TAC_PRPEMP();
            }
        });
    }