uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.55k stars 126 forks source link

如何获取codemirror实例?How to get codemirror object? #452

Closed Cloudkkk closed 1 year ago

Cloudkkk commented 1 year ago

环境:react-codemirror 4.3.2、codemirror 5.65.0、react 17 我的需求是 获取到codemirror实例,然后通过doc.markText类似的api 传入行号将我所需要代码片 高亮/加自定义样式。 但我不知道如何使用react-codemirror实现上述操作?拿不到实例~ 期待大佬回答

environment:react-codemirror 4.3.2、codemirror 5.65.0、react 17 What I need to do is getting the codemirror object then using doc.markText .etc APIs with lines number as props to make my code section highlight or get some custom styles。 But now I dont know how to use react-codemirror to achieve because first of all I couldnt get the codemirror object hope for reply :>

jaywcjlove commented 1 year ago

https://github.com/uiwjs/react-codemirror/blob/9b6c17615528714cb066abd9d5f13d8b3dc79f98/core/src/index.tsx#L141-L146

使用 ref 应该可以获取 @Cloudkkk

Cloudkkk commented 1 year ago

感谢回答,昨天看了一部分文档,发现之前理解的有点问题。 codemirror6已经不支持使用api去改代码片的样式了,可能要自定义extension来完成,我需要重新想下实现方案。。。。

jaywcjlove commented 1 year ago

https://github.com/uiwjs/react-codemirror/tree/v3

@Cloudkkk 如果要使用 cm 5 可以使用 @uiw/react-codemirror v3