使用CodeMirror插件遇到的问题

CodeMirror的正常使用：

//首先经过<script>标签引入相应的js，这个就没必要说了
var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{
      key: "value"
});//就这么简单

问题1、CodeMirror在Bootstrap模态框下的使用不显示代码

这个很是简单

var myCodeMirror_Modal = CodeMirror.fromTextArea(document.getElementById("codetextarea"), {
    theme: "default",能够设置其余主题，但必须引入相应的css
    lineNumbers: true,
    mode: "text/javascript",能够设置其余语言，但必须引入相应的js
    smartIndent: true
});//构造CodeMirror实例
关键代码来了
$("#codeEditModal").on('shown.bs.modal.bs.modal', function () {//模态框显示后触发该事件
    myCodeMirror_Modal.refresh();//刷新编辑器，这样问题就解决了
});

问题2、如何使用clipboard复制CodeMirror里面的代码

clipboard的正常使用：

<!--html-->
<input type="text" id="myInput" value="输入内容" />
<button class="my-compy" data-clipboard-target="#myInput">复制文本框的内容</button>  <!--注意一下这个data-clipboard-target属性-->

<textarea id="myContent">123456789</textarea>
<button class="my-compy" data-clipboard-target="#myContent">复制多行文本框的内容</button>

首先经过<script>标签引入相应的js，这个就没必要说了
//JavaScript
var clipboard = new ClipboardJS('.my-compy');//经过class名构造实例

clipboard.on('success', function(e) {
    alert("复制成功");
});

clipboard.on('error', function(e) {
    console.log(e);
    alert("失败！");
});

问题：

<textarea id="myCode">$.ajax({})</textarea>
<button class="code-copy" data-clipboard-target="#myCode">复制多行文本框的内容</button>

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("myCode"), {
    theme: "default",
    lineNumbers: true,
    mode: "text/javascript",
    smartIndent: true
});//构造CodeMirror实例

var clipboard = new ClipboardJS('.code-copy');//经过class名构造实例

clipboard.on('success', function(e) {
    alert("复制成功");
});

clipboard.on('error', function(e) {
    console.log(e);
    alert("失败！");
});

结果你会发现，能够复制代码，没问题，可是不能够粘贴复制的代码，那问题到底出如今了哪里呢？
首先呢，排除clipboard插件的问题，这个很简单，随便找个例子测试一下就好了，发现的确没问题，能够复制，能够粘贴。
那问题确定是出如今CodeMirror上了。
折腾了好久，发现CodeMirror这个插件的原理：
它是首先获取textarea这个标签里面的内容，而后设置display:none;接着经过正则表达式，来解析textarea的内容，并在上面加上相应的样式，最后在textarea标签的后面插入新的内容。原理的确挺简单的，但要真正作到，的确是不容易的！！！

问题就出如今这个display:none上，而后我测试了一下，给一个文本框设置display:none,clipboard能够复制，但没法粘贴内容了。
总算找到了问题，那如何解决呢？
既然没法复制display:none的文本框的内容，那我能够经过CodeMirror的实例来获取代码内容不就好了吗？
答案：嗯，这样的确即可以了，问题解决！！！
代码以下：

<textarea id="myCode">$.ajax({})</textarea>
<button class="code-copy">复制多行文本框的内容</button><!--在这里不要设置data-clipboard-target-->

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("myCode"), {
    theme: "default",
    lineNumbers: true,
    mode: "text/javascript",
    smartIndent: true
});//构造CodeMirror实例

var clipboard = new ClipboardJS('.code-copy', {
    text: function (e) {
        var value = myCodeMirror.getValue();//重写clipboard粘贴的文本
        return value;
    }
});

clipboard.on('success', function(e) {
    alert("复制成功");
});

clipboard.on('error', function(e) {
    console.log(e);
    alert("失败！");
});

这样，便解决了问题，但一想：这样不行啊，若是我要构造多个CodeMirror，那复制的话，须要复制哪一个文本框里面的代码呢？

问题3、如何一次性构造多个CodeMirror

//遍历class为code_mirror_textarea的textarea
$(".code_mirror_textarea").each(function () {
    let textareaId = $(this).attr("id");//获取textarea的id
    let codeLanguage = $(this).data("codelanguage");//获取textarea的language mode，这个须要提早给每一个textarea经过data-codelanguage赋值的
    //console.log(textareaId, codeLanguage);
    myCodeEditor(textareaId, codeLanguage);//分别构造CodeMirror的实例
});


function myCodeEditor(textareaId, codeLanguage) {
    var editor = CodeMirror.fromTextArea(document.getElementById(textareaId), {
        theme: "default",
        lineNumbers: true,
        mode: codeLanguage,
        smartIndent: true
    });
}

问题4、批量构造多个CodeMirror,那如何获取CodeMirror的实例呢？

官网文档并无提供获取CodeMirror实例的API。
但仍是有办法滴，小爷我就是这么6！！！

function myCodeEditor(textareaId, codeLanguage) {
    var editor = CodeMirror.fromTextArea(document.getElementById(textareaId), {
        theme: "default",
        lineNumbers: true,
        mode: codeLanguage,
        smartIndent: true
    });
    $("#" + textareaId + "").data("CodeMirrorInstance", editor);//将CodeMirror实例存储在textarea对应的CodeMirrorInstance里面就能够了
} 

//而后怎么获取CodeMirror实例呢？
var myCodeMirror = $("#" + textareaId + "").data("CodeMirrorInstance");//接下来即可以经过myCodeMirror来调用相应的API了
var value = myCodeMirror.getValue();//获取CodeMirror值

骚年，不行了吧，赶忙点赞关注，全是干货，让你少走不少坑！!!