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

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))

这个就是简单的添加

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值