1，引入插件 2，页面样式代码编写 3，设置sql弹窗样式，初始化弹窗变量值
//引入插件 <link href="${ctx}/static/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" /> <link href="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" /> <script type="text/javascript" src="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.js"></script> <script type="text/javascript" src="${ctx}/static/js/plugins/codemirror-5.14.2/mode/sql/sql.js"></script> // 注意；sql弹窗的页面样式与父窗口的页面样式在同一个jsp文件中 <div id="defaultValue_div" style="display: none;"> <div class="div_border"> <div class="div_h"> <textarea id="zbsql" class="bi-width357 form-control" type="text" placeholder=" " name="zbsql" class="bi-width140 form-control" style=" display: block; width:435px; "></textarea> </div> </div> <div id="inenr_datagriddivbtn" style="margin-top: 10px;padding-top: 10px;;padding:3px;text-align:center;" > <button type="button" onclick="layer.closeAll()" class="btn btn-primary input-sm">确定</button> <button type="button" onclick=" layer.closeAll()" class="btn btn-danger btn-xs ">取消</button> </div> </div> // 初始化sql弹窗数据以及弹窗的样式 editor = CodeMirror.fromTextArea(document.getElementById("zbsql"), { lineNumbers: true, matchBrackets: true, lineWrapping:true, mode: "text/x-plsql" }); editor.setOption("theme", "eclipse"); editor.setSize('95%', '280px'); // 获取sql弹窗值的请求路径//这个sql只需要返回一个String类型即可 function dysql() { if(!interId){ dLong.layerInfo("请选择导出接口."); return; } layer.open({ type: 1, area: ['600px', '400px'], shade: false, title: '对应SQL', content:$('#defaultValue_div') }); var jsonData={}; $.ajax({ type: 'post', url: "/BaexportInfController/dbInter?interId="+interId, contentType: "application/json; charset=utf-8", data: JSON.stringify(jsonData), dataType: "json", success: function (data) { editor.setValue(data.sql); } }); }