完美解决react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
作者：一车鸡蛋
react-codemirror2 编辑器需点击一下或者延时才显示数据的问题
现象：
<Codemirror/>组件的数据已经赋上值的情况下，初始状态不渲染数据，需要点击编辑框获取焦点后才展示，或者延迟了几秒才显示出来。
原因：
指定了一些依赖的版本，可能不兼容了一些功能，导致这个现象出现
解决：
1. 手动引入自动刷新的插件 ;
2. 配置一下参数 。
代码如下：
import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';
...
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'
<CodeMirror
value={format(code,{lanuage:'plsql'})}
options={
autoRefresh: true, // 重点是这句，为true
scrollbarStyle: null,
mode: 'text/x-pgsql',
theme: 'material',
autofocus: false,
readOnly: false,
lineNumbers: true,
smartIndent: true,
lint: true,
lintWrapping: true
}
onChange={(editor,data,value)=>{...}}
>
</CodeMirror>官网：https://github.com/uiwjs/react-codemirror
react-codemirror2 代码编辑器
CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/
安装：
npm install react-codemirror2 codemirror --save
使用：
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// 主题风格
import 'codemirror/theme/solarized.css';
// 设置代码语言模式（比如JS，SQL，python，java等）
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/sql/sql.js';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/shell/shell.js';
import 'codemirror/mode/clike/clike.js';
// 代码模式，clike是包含java,c++等模式的
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/css/css';
//ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/anyword-hint.js'; // end
//代码高亮
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';
function ScriptTask() {
const [instance, setInstance] = useState(null);
const [codeData, setCodeData] = useState('');
return (
<CodeMirror
editorDidMount={(editor) => {
setInstance(editor);
}}
value={codeData}
options={{
// mode: { name: 'text/sql' }, //定义mode
mode: 'sql', //定义mode
theme: 'solarized', //选中的theme
autofocus: true, //自动获取焦点
styleActiveLine: true, //光标代码高亮
lineNumbers: true, //显示行号
smartIndent: true, //自动缩进
//start-设置支持代码折叠
lineWrapping: true,
foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], //end
extraKeys: {
Ctrl: 'autocomplete',
'Ctrl-S': function(editor) {
this.codeSave(editor);
},
'Ctrl-Z': function(editor) {
editor.undo();
}, //undo
F8: function(editor) {
editor.redo();
} //Redo
},
matchBrackets: true, //括号匹配，光标旁边的括号都高亮显示
autoCloseBrackets: true //键入时将自动关闭()[]{}''""
}}
// onChange={changeCode}
// 在失去焦点的时候触发，这个时候放数据最好
// onBlur={this.codeOnBlur}
// 这个必须加上，否则在一些情况下，第二次打开就会有问题
// onBeforeChange={(editor, data, value) => {
// console.log("onBeforeChange fresh")
// console.log(JSON.stringify(data));
// }}
/>
)
}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 编辑器需点击一下或者延时才显示数据的问题的文章就介绍到这了,更多相关react-codemirror2 编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！