山东大学软件学院项目实训weblab-1

前言

项目地址
本项目是为开发一套容器化的开发、运行、测试环境，用以支持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>

效果