CodeMirror6在光标处插入文本的正确方法

文章介绍了如何在Codemirror中使用EditorView和EditorSelection进行文本操作。方法1涉及利用view.dispatch()结合changes和selection进行插入与选中。方法2是通过replaceSelection()简单添加文本。注意vue-codemirror的@ready提供的state对象不能直接使用,应使用view.state。
摘要由CSDN通过智能技术生成
import {EditorView} from "@codemirror/view";
import {EditorSelection} from "@codemirror/state";

方法1

首先 view对象是 EditorView 类对象,如果你使用原生 codemirror 你会手动创建它,如果你使用 vue-codemirror , @ready会把它传给你。

向指定位置插入文本的方法为:

view.dispatch({
     changes: {from, to, insert},
})

为此我们需要知道现在光标的位置,获取方法为

view.state.selection.ranges[0]

坑注意: vue-codemirror的 @ready 会给你一个 state 对象,但是不能用那个,必须用 view 下面的 state (看起来是每次内容变动都会创建一个新的state)

这个方法的参数对象里还可以加 selection 参数,在插入之后选中指定范围的文本(选中占位符之类的操作):

view.dispatch({
    changes: {from, to, insert}, 
    selection: EditorSelection.range(anchor, head)
})

方法2

来自官网: https://codemirror.net/examples/change/

  view.dispatch(view.state.replaceSelection(text))

这个就是简单的添加

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CodeMirror中,可以通过设置光标的位置来插入信息。你可以使用`getCursor()`方法获取当前光标的位置,然后将光标位置作为参数传递给`replaceRange()`方法,将拼接好的信息插入到代码编辑器的光标位置。具体的代码示例如下: ```javascript copyValue(param) { let post1 = this.$refs.myCode.codemirror.getCursor(); console.log('post1', post1); let pos2 = { line: post1.line, //行号 ch: post1.ch //光标位置 }; this.$refs.myCode.codemirror.replaceRange(param, pos2); //替换内容 } ``` 这段代码将会在代码编辑器光标所在位置插入`param`参数所代表的拼接好的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-codemirror定位光标位置并在光标插入信息](https://blog.csdn.net/qq_45780380/article/details/121661880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CodeMirror](https://blog.csdn.net/weixin_34943809/article/details/114491450)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值