scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.65k stars 192 forks source link

How to get DOC #234

Closed LiJunYi2 closed 3 years ago

LiJunYi2 commented 3 years ago

doc.getSelection(?lineSep: string) → string Get the currently selected code. Optionally pass a line separator to put between the lines in the output. When multiple selections are present, they are concatenated with instances of lineSep in between.https://codemirror.net/doc/manual.html#api

my sample `import './App.css'; import { UnControlled as CodeMirror } from 'react-codemirror2' import 'codemirror/lib/codemirror.js' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/idea.css' import './code.css'

// 代码模式,clike是包含java,c++等模式的 import 'codemirror/mode/clike/clike' import 'codemirror/mode/sql/sql' //sql //ctrl+空格代码提示补全 import 'codemirror/addon/hint/show-hint.css'; import 'codemirror/addon/hint/show-hint'; import 'codemirror/addon/hint/sql-hint'; import 'codemirror/addon/hint/anyword-hint.js'; //代码高亮 import 'codemirror/addon/selection/active-line'; // 代码折叠 import 'codemirror/addon/fold/foldgutter.css'; import 'codemirror/addon/fold/foldcode.js'; import 'codemirror/addon/fold/foldgutter.js'; import 'codemirror/addon/fold/brace-fold.js'; import 'codemirror/addon/fold/comment-fold.js'; //代码滚动(垂直) import 'codemirror/addon/scroll/simplescrollbars.js' import 'codemirror/addon/scroll/simplescrollbars.css' //括号匹配 import 'codemirror/addon/edit/matchbrackets'

const data = "SELECT * FROM A" // 初始值

function App() { return ( <CodeMirror value={data} options={{ mode: { name: 'text/x-sql', //语言 sql }, smartIndent: true, //自动缩进 //readOnly: false, // 只读 autoCloseBrackets: true, //键入时将自动关闭()[]{}''"" lineNumbers: true, //显示行号 autofocus: true,//自动获取焦点 styleActiveLine: true,//光标代码高亮 theme: 'idea', //主题 hintOptions: { //确定当仅单个完成可用时是否完成而不显示对话框。默认为true completeSingle: false, tables: { A: ['id', 'name'], B: ['id', 'name', 'code'] } }, // 智能提示 extraKeys: { "Tab": "autocomplete",//ctrl-space唤起智能提示 // 代码格式化 "F7": function autoFormat(editor) { console.log(JSON.stringify(editor.getCursor(true))); console.log(JSON.stringify(editor.getCursor(false))); const totalLines = editor.lineCount(); editor.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines }); } }, scrollbarStyle: 'overlay', //代码折叠 lineWrapping: true, foldGutter: true, gutters: ['CodeMirror-linenumbers', 'CodeMirrorfoldgutter'],//end //括号匹配,光标旁边的括号都高亮显示 matchBrackets: true, // 拼写检查 spellcheck: true, // 实现语法报错 //lint: true, // 自动更正 autocorrect: true, }} // 这个必须加上,否则在一些情况下,第二次打开就会有问题 // onBeforeChange={(editor, data, value) => { // console.log("onBeforeChange fresh") // console.log(JSON.stringify(data)); // console.log(JSON.stringify(value)); // }} //每次编辑器内容更改时触发 // onChange={(editor, data, value) => { // console.log('uncontrolled', { value }); // }} // 编辑器失去焦点时触发 // 在失去焦点的时候触发,这个时候放数据最好 // onBlur={(editor, data, value) => { // console.log('onBlur fresh'); // console.log(JSON.stringify(data)); // console.log(JSON.stringify(value)); // console.log(editor.getValue()); // }} // 复制的时候触发 // onCopy={(editor, data, value) => { // console.log('onCopy fresh'); // console.log(JSON.stringify(data)); // console.log(JSON.stringify(value)); // console.log(editor.getValue()); // }} onCursor={(editor, data, value) => { console.log('onCursor fresh'); console.log(JSON.stringify(data)); console.log(JSON.stringify(value)); console.log(editor.getValue()); }} // 设置尺寸 editorDidMount={editor => { editor.setSize('auto', 'auto'); }} /> ); }

export default App; ` Ask questions:I should get the DOC?I want to call doc.getSelection