CodeMirror使用說明書

CodeMirror 使用方法

初步建立步驟

npm install codemirror下載下傳元件
引入核心配置包

import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'

引入後在html界面中建立textarea标簽，用于生成代碼框

<textarea class="form-control" id="code" name="code"></textarea>

根據textarea的id擷取到标簽元素，将容器轉換為編輯器

let myTextarea = document.getElementById('editor');
this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
mode:'javascript'//編輯器語言
theme:'monokai', //編輯器主題
extraKeys: {"Ctrl": "autocomplete"},//ctrl可以彈出選擇項 
lineNumbers: true//顯示行号
});

5.根據設定的主題，引入相應的主題包,主題包存儲在theme下，使用其他主題包時設定option中theme為對應主題

import 'codemirror/theme/monokai.css'

6.根據設定的編輯器語言，引入相應工具包,以下為常用語言包

import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'

7.初始化編譯器時可設定屬性：

value:初始内容
Mode:設定編譯器程式設計語言關聯内容，對應的mine值
Theme:編譯器的主題，需要引入對應的包
tabSize：tab的空格寬度
lineNumbers：是否使用行号
smartIndent：自動縮進是否開啟
indentUnit：縮進機關
keyMap：快捷鍵，default使用預設快捷鍵，除此之外包括emacs，sublime，vim快捷鍵，使用需引入工具

import codemirror/keymap/sublime.js
import codemirror/keymap/emacs.js
import codemirror/keymap/vim.js

extraKeys 快捷鍵,例如 {“Ctrl-Q”: “autocomplete”}：自動補全使用需要引入工具：

　　import 'codemirror/addon/hint/show-hint'
　　import 'codemirror/addon/hint/javascript-hint'
　　import 'codemirror/addon/hint/sql-hint'
　　import 'codemirror/addon/hint/html-hint'
　　import 'codemirror/addon/hint/xml-hint'
　　import 'codemirror/addon/hint/anyword-hint'
　　import 'codemirror/addon/hint/css-hint'
　　import 'codemirror/addon/hint/show-hint'

extraKeys的快捷鍵綁定指令：
- selectAllCtrl-A ：選擇編輯器的全部内容。
- killLine:Emacs式的清除行。用于删除行内光标後的内容。如果隻包含空白字元，行尾的新行(應該是指換行字元)也會被删除。
- deleteLine :删除光标所在整行，包括行尾的新行。
- delLineLeft:删除行内光标前的内容。
- delWrappedLineLeft:删除光标所在可見行左邊到光标處的部分。（這裡是針對在行内有換行顯示的情況，也就是說可能不是一行全部處理，而是隻處理行的一部分）
- delWrappedLineRight：删除光标所在可見行光标處到右邊的部分。（同上）
- undo：撤消最後一次更改。
- redo:重做最後一次撤消更改。
- undoSelection:撤消最後一次選擇的更改，如果沒有選擇更改，那麼就撤消最後一次文本更改。
- redoSelection:重做最後一次選擇的更改，如果沒有選擇更改，那麼就重做最後一次文本更改。
- goDocStart:移動光标到文檔開始處。
- goDocEnd:移動光标到文檔結束處。
- goLineStart:移動光标到行開始處。
- goLineStartSmartHome:移動光标到行文字開始處，如果光标已經在那，那麼就移動到行的真正開始處。
- goLineEnd:移動光标到行結束處。
- goLineRight:移動光标到可見行右邊。
- goLineLeft：移動光标到可見行左邊。如果行内有換行，那麼可能不會移動到行開始處。
- goLineLeftSmart：移動光标到行文字開始處，如果光标已經在那，那麼就移動到行的真正開始處。
- goLineUp：移動光标到上一行。
- goLineDown：移動光标到下一行。
- goPageUp：移動光标到上一屏，（每次）向上滾動相同距離。
- goPageDown：移動光标到下一屏，（每次）向下滾動相同距離。
- goCharLeft：光标向左移動一個字元，如果在光标行首，那麼移動到前一行。
- goCharRight：光标向右移動一個字元，如果在光标行尾，那麼移動到後一行。
- goColumnLeft:光标向左移動一個字元，但是不會超過行邊界。
- goColumnRight：光标向右移動一個字元，但是不會超過行邊界。
- goWordLeft:光标移動到前一個詞開始處。
- goWordRight：光标移動到後一個詞結束處。
- goGroupLeft：移動光标到光标前的組的左邊。組是詞的擴充，擴充到标點符号，新行或者是多個空白字元。
- goGroupRight：移動光标到光标後的組的右邊。組是詞的擴充，擴充到标點符号，新行或者是多個空白字元。
- delCharBefore:删除光标前的一個字元。
- delCharAfter:删除光标後的一個字元。
- delWordBefore:删除光标前的一個詞。
- delWordAfter:删除光标後的一個詞。
- delGroupBefore：删除光标前的一個組。
- delGroupAfter：删除光标後的一個組。
- indentAuto：自動縮進目前行或選中行。
- indentMore：縮進目前行或選中行一個縮進機關。
- indentLess：反縮進目前行或選中行一個縮進機關。（移除一個縮進單元）
- insertTab：在光标處插入Tab字元。
- insertSoftTab：在光标處插入與Tab字元等寬的空格字元。
- defaultTabTab：如果有選中行，則縮進一個縮進機關；如果沒有選擇行，則插入一個Tab字元。
- transposeChars：交換光标前後的字元。
- newlineAndIndentEnter：插入新行并且自動縮進。
- toggleOverwriteInsert：反轉overwrite标志。
- save：隻存在快捷鍵中，核心庫未定義。這是為了給使用者編碼提供一個簡單的方法來定義儲存指令。
- find：查找。
- findNext:向前查找。
- findPrev:向後查找。
- replace:替換。
- replaceAll:全部替換。
scrollbarStyle: 設定滾動條,預設為"null"為不顯示的滾動條，可以使用提供的其他滾動條：“simple”,"overlay"選擇内側與外側的滾動條,使用需引入以下工具包：

import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'

readOnly：設定為隻讀true/false;也可設定為"nocursor"失去焦點
Autofocus：初始時是否自動擷取焦點boolean
styleActiveLine: 設定光标所在行高亮true/false，需引入工具包：

import 'codemirror/addon/selection/active-line'

8.動态設定CodeMirror屬性：(以設定支援語言mode為例)

this.CodeMirrorEditor.setOption("mode",this.something)

編譯器的事件觸發器

觸發器使用方法：(change事件為例)

this.CodeMirrorEditor.on("change",function(){
//事件觸發後執行事件
alert("change")
});

取消觸發器方法：

this.CodeMirrorEditor.off("change")

“changes”：每次編輯器内容更改時觸發
“beforeChange”：事件在更改生效前觸發
“cursorActivity”：當光标或選中(内容)發生變化，或者編輯器的内容發生了更改的時候觸發。
“keyHandled”:快捷鍵映射(key map)中的快捷鍵被處理(handle)後觸發
“inputRead”:當使用者輸入或粘貼時編輯器時觸發。
“electrictInput”:收到指定的electrict輸入時觸發
“beforeSelectionChange”:此事件在選中内容變化前觸發
“viewportChange”：編輯器的視口( view port )改變（滾動，編輯或其它動作）時觸發
“gutterClick”：編輯器的gutter(行号區域)點選時觸發
“focus”：編輯器收到焦點時觸發
“blur”:編輯器失去焦點時觸發
“scroll”:編輯器滾動條滾動時觸發
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬體事件觸發器

API

this.CodeMirrorEditor.setValue(“Hello Kitty”)：設定編輯器内容
this.CodeMirrorEditor.getValue()：擷取編輯器内容
this.CodeMirrorEditor.getLine(n):擷取第n行的内容
this.CodeMirrorEditor.lineCount()：擷取目前行數
this.CodeMirrorEditor.lastLine()：擷取最後一行的行号
this.CodeMirrorEditor.isClean():boolean類型判斷編譯器是否是clean的
this.CodeMirrorEditor.getSelection()：擷取選中内容
this.CodeMirrorEditor.getSelections():傳回array類型選中内容
this.CodeMirrorEditor.replaceSelection(“替換後的内容”):替換選中的内容
this.CodeMirrorEditor.getCursor():擷取光标位置,傳回{line,char}
this.CodeMirrorEditor.setOption("",""):設定編譯器屬性
this.CodeMirrorEditor.getOption(""):擷取編譯器屬性
this.CodeMirrorEditor.addKeyMap("",""):添加key-map鍵值，該鍵值具有比原來鍵值更高的優先級
this.CodeMirrorEditor.removeKeyMap（""）:移除key-map
this.CodeMirrorEditor.addOverlay(""):Enable a highlighting overlay…沒試出效果
this.CodeMirrorEditor.removeOverlay（""）:移除Overlay
this.CodeMirrorEditor.setSize(width,height):設定編譯器大小
this.CodeMirrorEditor.scrollTo(x,y):設定scroll到position位置
this.CodeMirrorEditor.refresh():重新整理編輯器
this.CodeMirrorEditor.execCommand(“指令”):執行指令

效果圖：(和編輯器好像啊)

CodeMirror使用說明書

實作代碼：

setting.ts

import Vue from 'vue'
import { Component, Prop, Watch} from 'vue-property-decorator'
import  * as WithRender from './setting.html?style=./setting.less'
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/theme/monokai.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/hint/css-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/mode/meta'
import "codemirror/addon/fold/foldgutter.css" 
import "codemirror/addon/fold/foldcode"
import "codemirror/addon/fold/brace-fold"
import 'codemirror/addon/selection/active-line'
@WithRender
@Component
export class Setting extends Vue{
    nameArray=new Array();
    modeArray=new Array();
    mapArray=new Array();
    CodeMirrorEditor;
    something="";    
    mounted(){
        console.log(CodeMirror)
        for(var i=0;i<CodeMirror.modeInfo.length;i++){
            let mode=CodeMirror.modeInfo[i];
            this.mapArray.push({name:mode.name,mode2:mode.mode})
        }
        this.something="javascript"
        document.getElementById("theme").nodeValue="javascript"
        this.setmirror()
    }
    transToSrc(name:string):string{  
        return "assets/codemirror/mode/"+name+"/"+name+".js";
    }
    @Watch('something')
    aaa() {
        var headElement=document.body;
        var element=document.createElement("script");
        element.setAttribute("src",this.transToSrc(this.something));
        headElement.appendChild(element);
        element.() => {
          this.CodeMirrorEditor.setOption("mode",this.something)   
        }
    } 
    setmirror(){
        let myTextarea = document.getElementById('editor');
        this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
            theme:'monokai', 
            styleActiveLine: true,
            mode:'javascript',
            extraKeys: {"Ctrl": "autocomplete"},//輸入s然後ctrl就可以彈出選擇項  
            // lineNumbers: true,
            tabSize:10,
            // readOnly:"nocursor",
            smartIndent:true,
            scrollbarStyle:"overlay"
            // keymap:"defaule"
        });
        // this.CodeMirrorEditor.setOption('lineWrapping', true);
        this.CodeMirrorEditor.on("keypress",() =>{
            //編譯器内容更改事件
            console.log(this.CodeMirrorEditor)
            this.CodeMirrorEditor.showHint();
        });
        this.CodeMirrorEditor.setValue("Hello Kitty\nHello Tony\nHow are you\nFine thank you and you \nI love you")
        
        this.CodeMirrorEditor.setOption("lineNumbers","true")
        // this.CodeMirrorEditor.addOverlay("coconut");
        // this.CodeMirrorEditor.markText({line:0,ch:0},{line:0,ch:0})
        this.CodeMirrorEditor.setBookmark({line:0,ch:0},{line:0,ch:1},{readOnly:true}); 
        this.CodeMirrorEditor.setCursor(0)
        this.CodeMirrorEditor.setSize(600,600)
    }
        }

setting.html

<div class="setting">   
    <select id="theme"  v-model="something">
        <option v-for="name in mapArray" :value='name.mode2'>{{name.name}}</option>
    </select>
    <textarea id="editor" name="editor">
    </textarea>
</div>

setting.less

.setting{
    margin: 0;
    width: 1398px;
    height: 600px;
    background-color: rgb(248, 248, 248);
    h1{
        margin: 0;
    }
}

CodeMirror使用說明書

CodeMirror 使用方法

初步建立步驟

編譯器的事件觸發器

API

效果圖：(和編輯器好像啊)

繼續閱讀

使用clipboard.js複制頁面内容到剪切闆

ACE插件實作web編輯器

多選插件multiselect.js

react插件-圖表echarts1. 安裝2. 頁面使用

【react插件-富文本框react-draft-wysiwyg】1. 安裝2. 富文本框元件3. 引用富文本元件

通過 GitHub Actions 将 GitHub 倉庫自動備份到 Gitee、GitLab

react CodeMirror react-codemirror2 改變高度

【官方原版】Bootstrap Tooltips

使用codemirror對xml進行高亮顯示

WdatePicker.js時間日期插件WdatePicker.js時間插件使用WdatePicker.js時間插件的取值和指派：

基于awesome實作audio樣式自定義

JQuery的 iCheck 單選、複選美化插件使用

Font Awesome 圖示動畫

daterangepicker 預設選中ranges

daterangepicker的使用

前端插件swiper的基礎使用前端插件swiper的基礎使用