MonacoEditor光标问题debug全过程
最后更新于
最后更新于
我们来看一下这个小伙伴的 bug
借这机会呢我们正好也体验一下这个
GitHub 的 Codespaces
我们点这就不用克隆项目了
直接点这个 Codespaces
然后 create Codespaces
他也是一个云空间
好然后我们打开 vs code
初始化一下
好然后呢我们在终端里
npm install 一下
好可以了
然后呢看一下脚本
把它跑起来
跑起来以后它会自动创建一个（端口）映射
大家看它已经提示我了
在这能看到
本地的8080映射到了远端的
好
看直接点击就行了
这个过程比Fleet体验要好
好我们来看项目哈
我把这个稍微放大一点
就这么大吧
他的意思是这是一个编辑器
然后他想做双向的绑定
比如说他在上面编辑内容下
下边跟着变
大家看啊
变是变了
但是呢光标错了跑到前面来了
大家看
我再写一个看看
我们在下面写呢
大家看 下边写没问题
我们来看一下代码
找这个 vue
在这里
这个没有
(终端窗口）隐藏掉
啊这很简单这里边用到了这个组件
他看组件呢在这
所以我们再找这个vue
这个 vue 里边呢
就用到了这个编辑器
然后
他在这做 watch
他把注视也写好了
意思是把这行注视掉
光标就没问题了
但是呢
不能双向绑定了
我们试一下
嘿光标果然没问题了
双线绑定也可以啊
大家看下边也跟着变
我在下边写一下，啊！下边写上面不变了
说他这行（刚刚）被注释了代码
他是管下边写了代码之后同步到上
面
但是呢因为他监听的是这个sql变量
比如说不管你上面写还是下面写
他都走这个方法
所以呢
他在上面写的时候呢就会出问题
但其实啊
他在上面写不需要用这行代码
但看我们刚才也试过了我把它注视掉
因为上面写的话
他是即使你不写这行代码
他下面也可以同步对吧
反倒是因为他在上面写之后呢
你让他再重绘一遍（编辑器组件）
那就有问题了
所以我们要把这行代码呀
加一个判断
就说
上面这个编辑器没有焦点的情况下
再走这个
相当于他是在下边编辑
再用这个方法就可以了
所以呢我们要想办法在这加一个判断
然后呢
在这执行这句话
这里边应该怎么写呢
我们来看一下他用的是这个editor
这个类
大家看
这个editor.value
我们搜一下这个editor
这有个 hasTextFocus
那他这块应该这么写
先把这块注掉
在这打印一下
点
这个
方法
来试一下
（啊！这个有可能为空）
false
ok 那就简单了
我们在这把这个拿到这里来
只有当他是 false 的时候 （说明是在编辑器意外的其他地方编辑了文本）
再去执行这个方法
再试一下刷新的
大家看 没问题了
下边写也没问题
OK了 这就解决了