使用CodeMirror插件遇到的問題

CodeMirror的正常使用：

//首先通過<script>标簽引入相應的js，這個就不必說了
var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{
      key: "value"
});//就這麼簡單
           

問題一、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();//重新整理編輯器，這樣問題就解決了
});
           

問題二、如何使用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，那複制的話，需要複制哪個文本框裡面的代碼呢？

問題三、如何一次性構造多個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
    });
} 
           

問題四、批量構造多個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值
           

騷年，不行了吧，趕緊點贊關注，全是幹貨，讓你少走很多坑！!!