react-codemirror2 代码编辑器

戴口罩的汤圆 發表於 2021-7-22 16:15:00

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/
安装：
<div class="cnblogs_code">
<pre>npm install react-codemirror2 codemirror --save</pre>
</div>
使用：
<div class="cnblogs_code">
<pre> 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 = useState(null);
29 const = 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 }</pre>
</div>
 
<h4 id="articleContentId" class="title-article">CodeMirror 事件</h4>
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):编辑器失去焦点时触发
<h4 id="articleContentId" class="title-article">CodeMirror 常用方法</h4>
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():回退 
来源：https://www.cnblogs.com/minjh/p/15044706.html

頁: [1]

琼殿技术论坛's Archiver

react-codemirror2 代码编辑器