codemirror-lite

エディタを実装したい事が増えてきたので

使い方

code:template.vue

<codemirror ref="codemirror" id="input" v-model="input" :options="codeMirrorOption"></codemirror>

code: index.js

import { codemirror } from "vue-codemirror-lite";

import "codemirror/mode/markdown/markdown";

import "codemirror/addon/edit/continuelist.js";

import "codemirror/theme/monokai.css";

//data内

codeMirrorOption: {

mode: "markdown",

extraKeys: { Enter: "newlineAndIndentContinueMarkdownList" },

lineNumbers: true,

theme: "monokai",

lineWrapping: true,

dragDrop: false //to prevent file drop insert

}

//computed内

editor() {

return this.$refs.codemirror.editor;

}

//コード挿入

this.editor.replaceSelection(code);

code: index.css

/* 高さを100%に設定する */

.CodeMirror {

height: 100% !important;

}

vue-cm

速攻でegoistさんからリプが飛んでくる

すごい