需求的背景
目标效果：
需求： 根据选择不同的关键字、公式和函数，展示不同颜色关键字以及公式
最终实现效果图：
核心逻辑
<template>
<div *class*="my-codemirror">
<textarea *ref*="codeEditor" *placeholder*="请输入..."></textarea>
</div>
</template>
onMounted(() => {
editor = CodeMirror.fromTextArea(codeEditor.value, {
value: content.value,
mime: 'text/javascript',
indentWithTabs: false, // 在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
smartIndent: true, // 自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true
lineNumbers: true, // 是否在编辑器左侧显示行号
matchBrackets: true, // 括号匹配
readOnly: false,
// 启用代码折叠相关功能:开始
foldGutter: true,
lineWrapping: true,
viewportMargin: 10,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
// 启用代码折叠相关功能:结束
styleActiveLine: true // 光标行高亮
})
setTimeout(() => {
editor.refresh()
editor.setValue(content.value || '')
}, 50)
// 监听编辑器的change事件
editor.on('change', () => {
// 触发v-model的双向绑定
console.log(context, editor, 'editor')
histMarks.forEach(*n* => {
n.clear()
})
// context.emit('update:content', editor.getValue())
editorFields.value.forEach(*n* => {
// context.emit('update:content', editor.getValue())
const keyword = n
const textContent = editor.getValue()
const regex = **new** RegExp(keyword, 'g')
const className = 'codemirror-field'
let match
while ((match = regex.exec(textContent))) {
const from = editor.posFromIndex(match.index)
const to = editor.posFromIndex(match.index + match[0].length)
histMarks.push(editor.markText(from, to, { className }))
}
editorFuncs.value.forEach(*n* => {
// context.emit('update:content', editor.getValue())
const keyword = n
const textContent = editor.getValue()
const regex = **new** RegExp(keyword, 'g')
const className = 'codemirror-func'
let match
while ((match = regex.exec(textContent))) {
const from = editor.posFromIndex(match.index)
const to = editor.posFromIndex(match.index + match[0].length)
histMarks.push(editor.markText(from, to, { className }))
}
})
const parentheses = ['\\(', '\\)']
parentheses.forEach(*n* => {
// context.emit('update:content', editor.getValue())
const keyword = n
const textContent = editor.getValue()
const regex = **new** RegExp(keyword, 'g')
const className = 'codemirror-parentheses'
let match
while ((match = regex.exec(textContent))) {
const from = editor.posFromIndex(match.index)
const to = editor.posFromIndex(match.index + match[0].length)
histMarks.push(editor.markText(from, to, { className }))
}
})
window.codemirrorEditorCurrentValue = editor.getValue()
})
})
这是实现自定义大致流程，以此记录，希望能帮到大家，有问题或者有更好实现方案欢迎评论告知，或添加微信公众号共同学习交流
