CodeMirror 如何动态更新definemode

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 ) {
 	//更新实例的mode
   instance.CodeMirror.setOption("mode","chinese")
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值