快捷導(dǎo)航

完美解決react-codemirror2?編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題

更新時(shí)間：2023年08月11日 10:58:32 作者：一車雞蛋

這篇文章主要介紹了react-codemirror2編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題,解決方法也很簡單，需要手動(dòng)引入自動(dòng)刷新的插件，配置一下參數(shù)就可以了，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

react-codemirror2 編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題

現(xiàn)象：

<Codemirror/>組件的數(shù)據(jù)已經(jīng)賦上值的情況下，初始狀態(tài)不渲染數(shù)據(jù)，需要點(diǎn)擊編輯框獲取焦點(diǎn)后才展示，或者延遲了幾秒才顯示出來。

原因：

指定了一些依賴的版本，可能不兼容了一些功能，導(dǎo)致這個(gè)現(xiàn)象出現(xiàn)

解決：

1. 手動(dòng)引入自動(dòng)刷新的插件 ;

2. 配置一下參數(shù) 。

代碼如下：

import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql'; 
...
// 引入自動(dòng)刷新
import 'codemirror/addon/display/autorefresh'
<CodeMirror 
    value={format(code,{lanuage:'plsql'})} 
    options={
        autoRefresh: true, // 重點(diǎn)是這句，為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>

官網(wǎng)：https://github.com/uiwjs/react-codemirror

react-codemirror2 代碼編輯器

CodeMirror是一款在線的支持語法高亮的代碼編輯器。官網(wǎng)： http://codemirror.net/

安裝：

npm install react-codemirror2 codemirror --save

使用：

import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
// 主題風(fēng)格
import 'codemirror/theme/solarized.css';
// 設(shè)置代碼語言模式（比如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+空格代碼提示補(bǔ)全
import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代碼提示補(bǔ)全
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, //自動(dòng)獲取焦點(diǎn)
              styleActiveLine: true, //光標(biāo)代碼高亮
              lineNumbers: true, //顯示行號(hào)
              smartIndent: true, //自動(dòng)縮進(jìn)
              //start-設(shè)置支持代碼折疊
              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, //括號(hào)匹配，光標(biāo)旁邊的括號(hào)都高亮顯示
              autoCloseBrackets: true //鍵入時(shí)將自動(dòng)關(guān)閉()[]{}''""
          }}
          // onChange={changeCode}
          // 在失去焦點(diǎn)的時(shí)候觸發(fā)，這個(gè)時(shí)候放數(shù)據(jù)最好
          // onBlur={this.codeOnBlur}
          // 這個(gè)必須加上，否則在一些情況下，第二次打開就會(huì)有問題
          //     onBeforeChange={(editor, data, value) => {
          //       console.log("onBeforeChange fresh")
          //       console.log(JSON.stringify(data));
          //     }}
      />
    )
}

CodeMirror 事件

1.onChange(instance,changeObj)：codeMirror文本被修改后觸發(fā)。instance是一個(gè)當(dāng)前的codemirror對(duì)象，changeObj是一個(gè)｛from，to，text[,removed][，origin]｝對(duì)象。其中from，to分別表示起始行對(duì)象和結(jié)束行對(duì)象，行對(duì)象包括ch：改變位置距離行頭的間隔字符，line：改變的行數(shù)。text是一個(gè)字符串?dāng)?shù)組表示被修改的文本內(nèi)容，即你輸入的內(nèi)容。

2.onBeforeChange(instance,changObj):內(nèi)容改變前被調(diào)用

3.onCursorActivity(instance)：當(dāng)鼠標(biāo)點(diǎn)擊內(nèi)容區(qū)、選中內(nèi)容、修改內(nèi)容時(shí)被觸發(fā)

4.onKeyHandled:(instance,name,event):當(dāng)一個(gè)都dom元素的事件觸發(fā)時(shí)調(diào)用，name為操作名稱。

5.onInputRead(insatance,changeObj):當(dāng)一個(gè)新的input從隱藏的textara讀取出時(shí)調(diào)用

6.onBeforeSelectionChange(instance,obj):當(dāng)選中的區(qū)域被改變時(shí)調(diào)用，obj對(duì)象是選擇的范圍和改變的內(nèi)容（本人未測試成功）

7.onUpdate(instance):編輯器內(nèi)容被改變時(shí)觸發(fā)

8.onFocus(instance):編輯器獲得焦點(diǎn)式觸發(fā)

9.onBlur(instance):編輯器失去焦點(diǎn)時(shí)觸發(fā)

CodeMirror 常用方法

getValue():獲取編輯器文本內(nèi)容

setValue(text):設(shè)置編輯器文本內(nèi)容

getRange({line,ch},{line,ch}):獲取指定范圍內(nèi)的文本內(nèi)容第一個(gè)對(duì)象是起始坐標(biāo)，第二個(gè)是結(jié)束坐標(biāo)

replaceRange(replaceStr,{line,ch},{line,ch}):替換指定區(qū)域的內(nèi)容

getLine(line)：獲取指定行的文本內(nèi)容

lineCount():統(tǒng)計(jì)編輯器內(nèi)容行數(shù)

firstLine():獲取第一行行數(shù)，默認(rèn)為0，從開始計(jì)數(shù)

lastLine():獲取最后一行行數(shù)

getLineHandle(line):根據(jù)行號(hào)獲取行句柄

getSelection():獲取鼠標(biāo)選中區(qū)域的代碼

replaceSelection(str):替換選中區(qū)域的代碼

setSelection({line:num,ch:num1},{line:num2,ch:num3}):設(shè)置一個(gè)區(qū)域被選中

somethingSelected()：判斷是否被選擇

getEditor()：獲取CodeMirror對(duì)像

undo()：撤銷

redo():回退

到此這篇關(guān)于react-codemirror2 編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問題的文章就介紹到這了,更多相關(guān)react-codemirror2 編輯器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: