codemirror

1.首先先安裝好依賴包

npm install codemirror
yarn add codemirror

2.引入性對應的依賴包

import 'codemirror/theme/ambiance.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/hint/show-hint.css';

const CodeMirror = require('codemirror');
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/selection/active-line');
require('codemirror/mode/javascript/javascript');
require('codemirror/addon/hint/show-hint');
require('codemirror/keymap/sublime.js');
require('codemirror/addon/selection/active-line.js');
require('codemirror/addon/edit/matchbrackets.js');
require('codemirror/addon/display/autorefresh.js');

3.掛載textarea標簽

<textarea ref="mycode" class="textarea" v-model="textarea"></textarea>

4.實體CodeMirror

    mounted() {
		this.editorText = CodeMirror.fromTextArea(this.$refs.mycode, {
            mode: { name: 'javascript', globalVars: true },
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            autoRefresh: true,
            extraKeys: { Ctrl: 'autocomplete' }, // 自定義快捷鍵
            hintOptions: {
                // 自定義提示選項
                tables: {
                    users: ['name', 'score', 'birthDate'],
                    countries: ['name', 'population', 'size'],
                },
            },
        });
        // 可選,掛載一下監聽事項
        this.editorText.on('change', (cm: any) => {
            this.code = cm.getValue(); // 這里要用多一個載體去獲取值,不然會重復賦值卡頓
        });
	}

重繪等問題

注意要注冊一個重繪事件,方便呼叫

    refresh() {
        this.$nextTick(() => {
            this.editorText.refresh();
        });
    }

手動set值進去后要重繪

	setValue(value:string){
		this.cminstance.setValue(this.textarea);
        this.refresh();
	}

講一下依賴包的引入

因為官方檔案是全英文,而且寫的十分零散

https://codemirror.net/

如果是更換語言的話可以在node_modules 里面找
在這里插入圖片描述
對應修改位置

小聰也是剛剛開始接觸這個插件,還在研究,之后有新的識訓就會更新到這篇文章

2021-04-20 更新

更換主題

在這里插入圖片描述
theme:更換主題,主題包在

更改參考的css樣式

下面是例子:

material-darker

在這里插入圖片描述

3024-day

在這里插入圖片描述

剩下的下面就在theme里面同名更換就好了

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278482.html

標籤：其他

上一篇：JS類和物件