codeMirror插件使用講解
codeMirror是一款十分強(qiáng)大的代碼編輯插件,提供了十分豐富的API,最近在項(xiàng)目中用到了這款插件,于是在這里給大家分享下使用方法和心得:
codeMirror調(diào)用非常方便
首先在頁(yè)面中載入插件CSS及JS文件
<link href="/static/codemirror/lib/codemirror.css" rel="stylesheet" > <script src="/static/codemirror/lib/codemirror.js"></script>
同時(shí)加載你所需要使用的腳本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頁(yè)面中編寫好代碼:
<!--選擇腳本編碼代碼--> <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號(hào) lineNumbers: true,//是否顯示行號(hào) mode:"shell", //默認(rèn)腳本編碼 lineWrapping:true, //是否強(qiáng)制換行 });
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/ 查看其配置文檔。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
js onmousewheel事件多次觸發(fā)問題解決方法
做一個(gè)首屏和第二屏之間滾動(dòng)鼠標(biāo)滾輪就可以整平切換的效果,遇到了很多問題,下面是問題解決方法2014-10-10webpack4升級(jí)到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)
有些老項(xiàng)目的包長(zhǎng)時(shí)間沒有更新,導(dǎo)致項(xiàng)目中有些性能問題,在項(xiàng)目迭代中考慮升級(jí)包,下面這篇文章主要給大家介紹了關(guān)于webpack4升級(jí)到webpack5的實(shí)戰(zhàn)經(jīng)驗(yàn),需要的朋友可以參考下2022-08-08layui 上傳插件 帶預(yù)覽 非自動(dòng)上傳功能的實(shí)例(非常實(shí)用)
今天小編就為大家分享一篇layui 上傳插件 帶預(yù)覽 非自動(dòng)上傳功能的實(shí)例(非常實(shí)用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09利用JavaScript中的高階函數(shù)和閉包實(shí)現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案,使得我們能夠靈活地封裝和管理代碼操作,所以本文將為大家介紹命令模式的概念、應(yīng)用場(chǎng)景以及在JavaScript中的實(shí)現(xiàn)方式,需要的可以參考一下2023-06-06echart簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了echart簡(jiǎn)介,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能示例
這篇文章主要介紹了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能,可實(shí)現(xiàn)關(guān)鍵詞描紅的功能,涉及JS重復(fù)匹配的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果
這篇文章主要介紹了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法,以實(shí)例形式完整講述了javascript實(shí)現(xiàn)幻燈效果的javascript、css及html實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
本篇文章主要是對(duì)JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03