CodeMirror 如何动态更新definemode
- 问题描述:
- 解决方法:
问题描述:
项目中有一部分用到了CodeMirror
组件,其高亮显示的内容需要根据最新的json动态的更新,需要使用definemode自定义高亮内容。
想要的效果如下:
但在实际实现时发现,一旦codemirror实例创建完成之后,即使definemode定义的语法规则发生了变化,codemirror也不会根据最新的规则高亮显示对应内容,
实际情况如下图:
解决方法:
使用setOption更新codemirror
代码:
function defineChineseMode(json) {const jsonMode = createJsonMode(json) //生成语法规则return function () {return {token: function (stream, state) {//根据语法规则生成正则表达式......stream.next(); // 继续检查下一个字符return null}};};}
defineMode("chinese", defineChineseMode())
const instance = document.querySelector('.react-codemirror2 .CodeMirror') // 获取codemirror实例if (instance ) {//更新实例的modeinstance.CodeMirror.setOption("mode","chinese")}