codemirror6实现自定义代码提示效果实例
作者：鲸渔
这篇文章主要给大家介绍了关于codemirror6实现自定义代码提示效果的相关资料,CodeMirror是一个网络代码编辑器组件,它可以在网站中用于实现支持多种编辑功能的文本输入字段,并具有丰富的编程接口以允许进一步扩展,需要的朋友可以参考下
1、需求
采用codemirror 6版本开发 ，要求：自定义代码提示 ，通过输入关键字，实现代码片段覆盖。
类似于Vscode中输入VueInit ，显示代码片段：
<template lang="">
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>参考官网:CodeMirror Autocompletion Example 中的Providing Completions。
2、初始化
加载以下依赖包
npm i codemirror npm i @codemirror/autocomplete npm i @codemirror/theme-one-dark
添加容器 并绑定id
<div id="codemir" ></div>
js中引用
import { basicSetup, EditorView } from "codemirror";
import { oneDark } from "@codemirror/theme-one-dark"; //黑色主题编辑器
import { autocompletion } from "@codemirror/autocomplete"; 在onMounted初始化codemirror ，并添加对应id
const editor = new EditorView({
doc: "Press Ctrl-Space in here...\n",
extensions: [
basicSetup,
oneDark,
],
parent: document.getElementById("coder"),
options: {},
});3、设置代码提示
其中from为当前位置 ， options为自定义提示列表。apply 为需求中提到的自定义代码，还有info 信息提示 等。
function myCompletions(context) {
let word = context.matchBefore(/\w*/)
if (word.from == word.to && !context.explicit) return null;
return {
from: word.from,
options: [
{ label: "match", type: "keyword" },
{ label: "hello", type: "variable", info: "(World)" },
{ label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
],
};
} 最后，将codemirror绑定自定义的代码提示，使用extensions
const editor = new EditorView({
doc: "Press Ctrl-Space in here...\n",
extensions: [
basicSetup,
oneDark,
autocompletion({ override: [myCompletions] })
],
parent: document.getElementById("coder"),
options: {
},
});4、其他优化
代码回显：
editor.dispatch({
changes: { from: 0, to: editor.state.doc.length, insert: content },
}); //插入content 以及代码更新监测 ：
const editor = new EditorView({
doc: "Press Ctrl-Space in here...\n",
extensions: [
basicSetup,
oneDark,
autocompletion({ override: [myCompletions] }),
EditorView.updateListener.of((v) => {
console.log(v.state.doc.toString()) //监测得到的最新代码
}),
],
parent: document.getElementById("coder"),
options: { },
});5、实现效果
总结
到此这篇关于codemirror6实现自定义代码提示的文章就介绍到这了,更多相关codemirror6自定义代码提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！