vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 codemirror6增加代码提示

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

作者:向生活低头...

这篇文章主要给大家介绍了关于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、创建编辑器

<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>

总结 

到此这篇关于vue3中如何使用codemirror6增加代码提示功能的文章就介绍到这了,更多相关vue3 codemirror6增加代码提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文