vue3中如何使用codemirror6增加代碼提示功能

更新時間：2023年08月21日 09:19:17 作者：向生活低頭...

這篇文章主要給大家介紹了關于vue3中如何使用codemirror6增加代碼提示功能的相關資料,Codemirror是一個不錯的Web代碼編輯庫,可以方便簡單的集成,需要的朋友可以參考下

1、安裝依賴

// 安裝codemirror、語言包、主題、自動補全

npm i codemirror
npm i @codemirror/lang-javascript
npm i @codemirror/autocomplete
npm i @codemirror/theme-one-dark

本人安裝的版本是

"dependencies": {
    "@codemirror/autocomplete": "^6.0.0",
    "@codemirror/lang-javascript": "^6.0.2",
    "@codemirror/theme-one-dark": "^6.0.0",
    "codemirror": "^6.0.1",
    ...
},

2、創(chuàng)建編輯器

<template>
  <el-select
    placeholder="請選擇分組"
    v-model="group"
    clearable
    @change="insertGroup"
  >
    <el-option
      v-for="dict in groupList
      :key="dict.id"
      :label="dict.dgName + '(' + dict.dgCode + ')'"
      :value="dict.dgCode"
    ></el-option>
  </el-select>
  <el-button @click="codeBeauty" style="margin-bottom: 0.5rem">代碼格式化</el-button>
  <div id="coder"></div>
  <el-button type="primary" @click="submitForm" v-if="!testFlag">確 定</el-button>
</template>

<style scoped>
#coder{
  margin-top: 10px;
  width: 100%;
}
</style>

<script setup name="Command">
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
import { basicSetup, EditorView } from "codemirror";
import { autocompletion } from "@codemirror/autocomplete"; 
const { proxy } = getCurrentInstance();
const allKeyList = ref([]);
const groupList = ref([]);
const group = ref("");
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
let editor = null;
// 獲取自定義提示內容
function getCommandList() {
    groupList.value = [
        { id: '1', label: '分組1', value: 'group1' },
        { id: '2', label: '分組2', value: 'group2' },
    ]; 
    allKeyList.value = [
      { label: "@match", type: "keyword", apply: "match", detail: "match" },
      { label: "@hello", type: "variable", apply: "hello", detail: "hellodetail" },
      { label: "@magic", type: "text", apply: "??*.?.*??", detail: "macro" },
    ];
}
// 代碼美化
function codeBeauty() {
  editor.dispatch({
    changes: { 
        from: 0, 
        to: editor.state.doc.length, 
        insert:js_beautify(getCommanContent() || "") 
    },
  });
}
// 獲取當前編輯器中的內容字符串
function getCommanContent() {
  let str = ""
  editor.state.doc.children.forEach((el,index) => {
    str += el.text.join("\n") + "\n"
  })
  return str.slice(0,-1);
}
// 初始化編輯器
function initCodeContent(){
  setTimeout(() => {
    if(!editor) {
      editor = new EditorView({
        doc: "Press Ctrl-Space in here...\n",
        extensions: [
          basicSetup,
          javascript(),
          oneDark,
          autocompletion({ override: [myCompletions] }),
          // EditorView.updateListener.of((v) => {
          //   console.log(v.state.doc.toString()) 
          // }),
        ],
        parent: document.getElementById("coder"),
        options: {
          lineNumbers: true,
          line: true,
          //ctrl-space喚起智能提示
          extraKeys: {
            Ctrl: "autocomplete",
          },
          //括號匹配
          matchBrackets: true,
        },
      });
    }
    editor.dispatch({
      changes: { 
        from: 0, 
        to: editor.state.doc.length, 
        insert: form.value.commandContent || "Press Ctrl-Space in here...\n" 
      },
    });
  }, 500);
}
// 自定義的代碼不全，options為自定義內容，以@開頭進行匹配
function myCompletions(context) {
  let word = context.matchBefore(/@\w*/);
  if (!word && !context.explicit) return null;
  return {
    from: word.from ? word.from : context.pos,
    options: allKeyList.value,
  };
}
// 選擇分組添加到編輯其中
function insertGroup() {
  insertCommandContant(group.value);
  group.value = "";
}
// 外部輸入內容，添加到編輯器當前光標(或選中內容)所在的位置
function insertCommandContant(insertContent) {
  editor.dispatch({
    changes: { 
        from: editor.state.selection.ranges[0].from, 
        to: editor.state.selection.ranges[0].to, 
        insert: insertContent 
    },
  });
}
/** 提交按鈕 */
function submitForm() {
  proxy.$modal.loading("正在保存，請稍候...");
  form.value.commandContent = getCommanContent();
  addForm(form.value).then((response) => {
    proxy.$modal.msgSuccess("新增成功");
    proxy.$modal.closeLoading();
  }).catch((err) => {proxy.$modal.closeLoading();});
}
getCommandList();
initCodeContent();
</script>