react-codemirror2 代码编辑器

  • Z时代
  • 2024-01-10
  • 分类：综合

react

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/

安装：

npm install react-codemirror2 codemirror --save

使用：

 1 import 'codemirror/lib/codemirror.js';
 2 import 'codemirror/lib/codemirror.css';
 3 // 主题风格
 4 import 'codemirror/theme/solarized.css';
 5 // 设置代码语言模式（比如JS，SQL，python，java等）
 6 import 'codemirror/mode/javascript/javascript';
 7 import 'codemirror/mode/sql/sql.js';
 8 import 'codemirror/mode/python/python.js';
 9 import 'codemirror/mode/shell/shell.js';
10 import 'codemirror/mode/clike/clike.js';
11 // 代码模式，clike是包含java,c++等模式的
12 import 'codemirror/mode/clike/clike';
13 import 'codemirror/mode/css/css';
14 //ctrl+空格代码提示补全
15 import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
16 import 'codemirror/addon/hint/show-hint.js';
17 import 'codemirror/addon/hint/anyword-hint.js'; // end
18 //代码高亮
19 import 'codemirror/addon/selection/active-line';
20 //折叠代码
21 import 'codemirror/addon/fold/foldgutter.css';
22 import 'codemirror/addon/fold/foldcode.js';
23 import 'codemirror/addon/fold/foldgutter.js';
24 import 'codemirror/addon/fold/brace-fold.js';
25 import 'codemirror/addon/fold/comment-fold.js';
26 
27 function ScriptTask() {
28     const [instance, setInstance] = useState(null);
29     const [codeData, setCodeData] = useState('');
30     
31     return (
32         <CodeMirror
33           editorDidMount={(editor) => {
34               setInstance(editor);
35           }}
36           value={codeData}
37           options={{
38               // mode: { name: 'text/sql' }, //定义mode
39               mode: 'sql', //定义mode
40               theme: 'solarized', //选中的theme
41               autofocus: true, //自动获取焦点
42               styleActiveLine: true, //光标代码高亮
43               lineNumbers: true, //显示行号
44               smartIndent: true, //自动缩进
45               //start-设置支持代码折叠
46               lineWrapping: true,
47               foldGutter: true,
48               gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], //end
49               extraKeys: {
50                   Ctrl: 'autocomplete',
51                   'Ctrl-S': function(editor) {
52                       this.codeSave(editor);
53                   },
54                   'Ctrl-Z': function(editor) {
55                       editor.undo();
56                   }, //undo
57                   F8: function(editor) {
58                       editor.redo();
59                   } //Redo
60               },
61               matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
62               autoCloseBrackets: true //键入时将自动关闭()[]{}''""
63           }}
64           // onChange={changeCode}
65 
66           // 在失去焦点的时候触发，这个时候放数据最好
67           // onBlur={this.codeOnBlur}
68 
69           // 这个必须加上，否则在一些情况下，第二次打开就会有问题
70           //     onBeforeChange={(editor, data, value) => {
71           //       console.log("onBeforeChange fresh")
72           //       console.log(JSON.stringify(data));
73           //     }}
74       />
75     )
76 }

CodeMirror 事件

1.onChange(instance,changeObj)：codeMirror文本被修改后触发。instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是一个字符串数组表示被修改的文本内容，即你输入的内容。

2.onBeforeChange(instance,changObj):内容改变前被调用

3.onCursorActivity(instance)：当鼠标点击内容区、选中内容、修改内容时被触发

4.onKeyHandled:(instance,name,event):当一个都dom元素的事件触发时调用，name为操作名称。

5.onInputRead(insatance,changeObj):当一个新的input从隐藏的textara读取出时调用

6.onBeforeSelectionChange(instance,obj):当选中的区域被改变时调用，obj对象是选择的范围和改变的内容（本人未测试成功）

7.onUpdate(instance):编辑器内容被改变时触发

8.onFocus(instance):编辑器获得焦点式触发

9.onBlur(instance):编辑器失去焦点时触发

CodeMirror 常用方法

getValue():获取编辑器文本内容

setValue(text):设置编辑器文本内容

getRange({line,ch},{line,ch}):获取指定范围内的文本内容第一个对象是起始坐标，第二个是结束坐标

replaceRange(replaceStr,{line,ch},{line,ch}):替换指定区域的内容

getLine(line)：获取指定行的文本内容

lineCount():统计编辑器内容行数

firstLine():获取第一行行数，默认为0，从开始计数

lastLine():获取最后一行行数

getLineHandle(line):根据行号获取行句柄

getSelection():获取鼠标选中区域的代码

replaceSelection(str):替换选中区域的代码

setSelection({line:num,ch:num1},{line:num2,ch:num3}):设置一个区域被选中

somethingSelected()：判断是否被选择

getEditor()：获取CodeMirror对像

undo()：撤销

redo():回退

以上是 react-codemirror2 代码编辑器 的全部内容， 来源链接： utcz.com/z/381345.html

回到顶部