codeMirror插件使用講解
codeMirror是一款十分強大的代碼編輯插件,提供了十分豐富的API,最近在項目中用到了這款插件,于是在這里給大家分享下使用方法和心得:
codeMirror調(diào)用非常方便
首先在頁面中載入插件CSS及JS文件
<link href="/static/codemirror/lib/codemirror.css" rel="stylesheet" > <script src="/static/codemirror/lib/codemirror.js"></script>
同時加載你所需要使用的腳本JS及風(fēng)格樣式CSS文件,如下舉例:
<link href="/static/codemirror/theme/3024-night.css" rel="stylesheet"> <link href="/static/codemirror/theme/erlang-dark.css" rel="stylesheet"> <script src="/static/codemirror/mode/shell/shell.js"></script> <script src="/static/codemirror/mode/perl/perl.js"></script> <script src="/static/codemirror/mode/python/python.js"></script>
注意文件的放置位置
下一步在html頁面中編寫好代碼:
<!--選擇腳本編碼代碼--> <div class="controls"> <input class="ck-code" type="radio" name="script_once_type" id="script_once_type1" checked> shell <input class="ck-code" type="radio" name="script_once_type" id="script_once_type2"> bat <input class="ck-code" type="radio" name="script_once_type" id="script_once_type3"> python </div> <!--選擇腳本風(fēng)格代碼--> <div class="controls"> <select id='select'> <option>default</option> <option>3024-night</option> <option selected>erlang-dark</option> </select> </div> <!--textarea--> <textarea id="script_once_code"> #!/bin/sh </textarea> <textarea id="code2" class="hide"> #!/usr/bin/env python # -*- coding: utf8 -*- </textarea>
調(diào)用關(guān)鍵代碼如下:
var editor = CodeMirror.fromTextArea($("#script_once_code")[0], { //script_once_code為你的textarea的ID號 lineNumbers: true,//是否顯示行號 mode:"shell", //默認腳本編碼 lineWrapping:true, //是否強制換行 });
JS配置代碼如下:
//選擇界面風(fēng)格JS $('#select').change(function(){ var theme = $('#select').val(); editor.setOption("theme", theme); //editor.setOption()為codeMirror提供的設(shè)置風(fēng)格的方法 }); //選擇腳本類型JS var txt1=$("#script_once_code").val(); var txt2=''; var txt3=$("#code2").val(); $(".ck-code").click(function(){ var txt=editor.getValue(); //editor.getValue()獲取textarea中的值 var lang=$(this).prop("id"); if(lang=="script_once_type1") { editor.setOption("mode","shell");//editor.setOption()設(shè)置腳本類型 editor.setValue(txt1);// editor.setValue()設(shè)置textarea中的值 } else if(lang=="script_once_type2") { editor.setOption("mode","perl"); editor.setValue(txt2); } else { editor.setOption("mode","python"); editor.setValue(txt3); } });
最終界面如下:
如需配置更多參數(shù),可以訪問codeMirror插件官網(wǎng):http://codemirror.net/ 查看其配置文檔。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
js onmousewheel事件多次觸發(fā)問題解決方法
做一個首屏和第二屏之間滾動鼠標(biāo)滾輪就可以整平切換的效果,遇到了很多問題,下面是問題解決方法2014-10-10webpack4升級到webpack5的實戰(zhàn)經(jīng)驗總結(jié)
有些老項目的包長時間沒有更新,導(dǎo)致項目中有些性能問題,在項目迭代中考慮升級包,下面這篇文章主要給大家介紹了關(guān)于webpack4升級到webpack5的實戰(zhàn)經(jīng)驗,需要的朋友可以參考下2022-08-08layui 上傳插件 帶預(yù)覽 非自動上傳功能的實例(非常實用)
今天小編就為大家分享一篇layui 上傳插件 帶預(yù)覽 非自動上傳功能的實例(非常實用),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09利用JavaScript中的高階函數(shù)和閉包實現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案,使得我們能夠靈活地封裝和管理代碼操作,所以本文將為大家介紹命令模式的概念、應(yīng)用場景以及在JavaScript中的實現(xiàn)方式,需要的可以參考一下2023-06-06echart簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了echart簡介,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能示例
這篇文章主要介紹了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能,可實現(xiàn)關(guān)鍵詞描紅的功能,涉及JS重復(fù)匹配的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能
本篇文章主要是對JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03