同上-代码编辑器选中高亮
This commit is contained in:
parent
8b4fc88b1d
commit
a3b943f744
|
@ -1,5 +1,4 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Editor from "react-monaco-editor";
|
|
||||||
import {UnControlled as CodeMirror} from 'react-codemirror2';
|
import {UnControlled as CodeMirror} from 'react-codemirror2';
|
||||||
import 'codemirror/addon/selection/active-line.js';
|
import 'codemirror/addon/selection/active-line.js';
|
||||||
import 'codemirror/mode/javascript/javascript.js';
|
import 'codemirror/mode/javascript/javascript.js';
|
||||||
|
@ -35,10 +34,10 @@ class m_editor extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { editorValue , changeValue } = this.state;
|
const { editorValue , changeValue } = this.state;
|
||||||
const { readOnly, editorType, language , currentBranch , descName } = this.props;
|
const { readOnly, editorType, currentBranch , descName } = this.props;
|
||||||
const editor_options = {
|
const editor_options = {
|
||||||
lineNumbers: "on",
|
lineNumbers: "on",
|
||||||
wordWrap: true, //强制换行
|
lineWrapping: true, //强制换行
|
||||||
selectOnLineNumbers: true,
|
selectOnLineNumbers: true,
|
||||||
lineHeight: 24,
|
lineHeight: 24,
|
||||||
renderLineHighlight: "line",
|
renderLineHighlight: "line",
|
||||||
|
@ -51,64 +50,15 @@ class m_editor extends Component {
|
||||||
automaticLayout: true, // 自适应布局
|
automaticLayout: true, // 自适应布局
|
||||||
overviewRulerBorder: false, // 不要滚动条的边框
|
overviewRulerBorder: false, // 不要滚动条的边框
|
||||||
scrollBeyondLastLine: false, // 取消代码后面一大段空白
|
scrollBeyondLastLine: false, // 取消代码后面一大段空白
|
||||||
|
styleActiveLine:true,//光标代码高亮
|
||||||
minimap: {
|
minimap: {
|
||||||
// 不要小地图
|
// 不要小地图
|
||||||
enabled: false,
|
enabled: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEditorMount = (editor, monaco) => {
|
|
||||||
editor.onDidChangeModelDecorations(() => {
|
|
||||||
requestAnimationFrame(updateEditorHeight); // folding
|
|
||||||
});
|
|
||||||
|
|
||||||
const updateEditorHeight = () => {
|
|
||||||
const editorElement = editor.getDomNode();
|
|
||||||
|
|
||||||
if (!editorElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const padding = 40;
|
|
||||||
|
|
||||||
const lineHeight = editor.getOption(
|
|
||||||
monaco.editor.EditorOption.lineHeight
|
|
||||||
);
|
|
||||||
|
|
||||||
const lineCount = editor.getModel().getLineCount() || 1;
|
|
||||||
let height =
|
|
||||||
editor.getTopForLineNumber(lineCount + 1) +
|
|
||||||
lineHeight +
|
|
||||||
padding ;
|
|
||||||
|
|
||||||
if(height<400){height = 400;}
|
|
||||||
|
|
||||||
if (this.state.prevHeight !== height) {
|
|
||||||
this.setState({
|
|
||||||
prevHeight:height
|
|
||||||
})
|
|
||||||
// setPrevHeight(height);
|
|
||||||
editorElement.style.height = `${height}px`;
|
|
||||||
editor.layout();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
updateEditorHeight(); // typing
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="editorBorderBox">
|
<div className="editorBorderBox">
|
||||||
{/* <Editor
|
|
||||||
language={language ? language : "plaintext"}
|
|
||||||
theme={"vs-grey"}
|
|
||||||
placeholder="请输入内容"
|
|
||||||
value={editorValue}
|
|
||||||
options={editor_options}
|
|
||||||
onChange={this.changeEditor}
|
|
||||||
editorWillMount={this.editorWillMount}
|
|
||||||
editorDidMount={handleEditorMount}
|
|
||||||
/> */}
|
|
||||||
<CodeMirror
|
<CodeMirror
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
value={editorValue}
|
value={editorValue}
|
||||||
|
|
Loading…
Reference in New Issue