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" >"#myInput">復制文本框的內容</button> <!--注意一下這個data-clipboard-target屬性--> <textarea id="myContent">123456789</textarea> <button class="my-compy" >"#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" >"#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 }); } 廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
問題四、批量構造多個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值