前言
项目地址
本项目是为开发一套容器化的开发、运行、测试环境,用以支持Web开发、程序设计等课程的实验教学。
本周任务
利用vue和codemirror实现一个简易的在线代码编辑器。
环境安装
用vue自带的脚手架创建项目
vue create fevu
安装vue-codemirror组件
npm install vue-codemirror --save
全局引入
main.ts中
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import { GlobalCmComponent } from "codemirror-editor-vue3";
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(GlobalCmComponent);
app.use(ElementPlus);
app.use(router).mount('#app')
App.vue:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<CodeEditor></CodeEditor>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import CodeEditor from './components/CodeEditor.vue'
export default {
name: 'App',
components: {
CodeEditor
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
自己创建的CodeEditor.vue:
<template>
<Codemirror
class="code-mirror"
v-model:value="code"
:options="cmOptions"
border
:height="400"
@change="onChange"
@ready="onReady"
autofocus
KeepCursorInEnd
/>
</template>
<script setup lang="ts">
import CodeMirror from "codemirror-editor-vue3"
// language
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/vue/vue.js";
import type { Editor, EditorConfiguration } from "codemirror";
// theme css
import "codemirror/theme/rubyblue.css";
import "codemirror/theme/panda-syntax.css";
import "codemirror/theme/darcula.css";
import "codemirror/theme/idea.css";
import "codemirror/theme/eclipse.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/searchcursor.js";
// hint
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/selection/active-line.js";
// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/match-highlighter.js";
// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import { onMounted, ref, type Ref } from "vue";
const cminstance = ref<Editor>();
const cmOptions: EditorConfiguration = {
mode: "text/x-java", // 语言模式
tabSize: 4,
theme: "darcula", // 主题
lineNumbers: true, // 显示行号
styleSelectedText: true,
smartIndent: true, // 智能缩进
indentUnit: 4, // 智能缩进单位为4个空格长度
foldGutter: true, // 启用行槽中的代码折叠
styleActiveLine: true, // 显示选中行的样式
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
matchBrackets: true,
showCursorWhenSelecting: true,
extraKeys: { Ctrl: "autocomplete" },
autofocus: true,
lineWrapping: true,
};
var code = ref();
function onChange(value: string, cm: Editor) {
// console.log(value, cm);
}
function onReady(cm: Editor) {
cminstance.value = cm;
}
onMounted(() => {
// code.value = "let b=20;";
})
</script>
<style>
.code-mirror {
font-size: 16px !important;
line-height: 150%;
text-align: left !important;
}
</style>