最近要寫一個在瀏覽器中寫代碼的功能
引入
npm install vue-codemirror --save
在main.js中
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)
在用到的組件中
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 這里引入的是主題樣式，根據設置的theme的主題引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 這里引入的模式的js，根據設置的mode引入，一定要引入！！
聲明
components: {
codemirror
},
在html中
<codemirror class="code-edit" ref="mycode" :value="curCode" :options="cmOptions"></codemirror>
在data中
curCode: '這里放的是codeMirror中默認值',
cmOptions: { //codeMirror的配置
value: '', //編輯器的初始值（文本）
mode: "text/javascript", //以什么格式進行代碼高亮
theme: "ambiance",// ambiance, foo bar, darcula //配置編輯器的主題樣式
indentUnit: 4, //縮進單位
smartIndent: true, // 自動縮進
tabSize: 4, //tab字符的寬度
lineNumbers: true, // 是否顯示行
firstLineNumber: 1, //第一行的行號
showCursorWhenSelecting: true, // 在選擇時是否顯示光標
readOnly: false //是否只讀,不能獲取焦點
},
獲取codeMirror中的代碼
this.$refs.mycode.codemirror.getValue()
實現的效果
