使用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值

騷年，不行了吧，趕忙點贊關注，全是乾貨，讓你少走不少坑！!!