1. 程式人生 > 其它 >編輯器react-codemirror2的封裝元件簡單使用

編輯器react-codemirror2的封裝元件簡單使用

1、下載安裝

npm install react-codemirror2 codemirror --save

2、引入

//引入Codemirror元件
import Cm from './extendCodeMirror.js'; import { UnControlled as CodeMirror } from 'react-codemirror2';
  //樣式
  import 'codemirror/lib/codemirror.css';   import 'codemirror/lib/codemirror.js';
  import 'codemirror/theme/dracula.css';   //主題     //程式碼摺疊     import 'codemirror/addon/fold/foldgutter.css';   import 'codemirror/addon/lint/lint.css';   import 'codemirror/addon/fold/foldcode.js';   import 'codemirror/addon/fold/foldgutter.js';   import 'codemirror/addon/fold/brace-fold.js';   import 'codemirror/addon/hint/javascript-hint.js';   import 'codemirror/addon/hint/show-hint.js';   import 'codemirror/addon/lint/lint.js';   import 'codemirror/addon/lint/json-lint.js';   import 'codemirror/addon/lint/javascript-lint.js';   import 'codemirror/addon/display/placeholder.js';   import 'codemirror/mode/javascript/javascript.js';     import 'codemirror/mode/sql/sql.js';       很多屬性配置,需要將對應檔案引入才生效       //詳細資訊配置可以檢視:https://codemirror.net,我這裡用的是json/js/sql , //https://www.tun6.com/projects/code_mirror//  這裡的也很全面    

   

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './style.less';
import Cm from './extendCodeMirror.js';
import { UnControlled as CodeMirror } from 'react-codemirror2';

// import * as sqlFormatter from 'sql-formatter';
import 'codemirror/lib/codemirror.css'; import 'codemirror/lib/codemirror.js'; import 'codemirror/theme/dracula.css'; import 'codemirror/addon/fold/foldgutter.css'; import 'codemirror/addon/lint/lint.css'; import 'codemirror/addon/fold/foldcode.js'; import 'codemirror/addon/fold/foldgutter.js'; import 'codemirror/addon/fold/brace-fold.js'; import
'codemirror/addon/hint/javascript-hint.js'; import 'codemirror/addon/hint/show-hint.js'; import 'codemirror/addon/lint/lint.js'; import 'codemirror/addon/lint/json-lint.js'; import 'codemirror/addon/lint/javascript-lint.js'; import 'codemirror/addon/display/placeholder.js'; import 'codemirror/mode/javascript/javascript.js'; import 'codemirror/mode/sql/sql.js'; const sqlFormatter = require('sql-formatter'); const Editors = (props) => { const { dispatch, title, type, editorList, rules, editorListErr } = props; const [editorVal, sEditorVal] = useState(''); const formRefs = useRef(null); const [editorBorder, sEditorBorder] = useState('none'); // let editor = null; useEffect(() => { if (formRefs.current) { // console.log(editorList,title+'title') editorList.map((val) => { if (val.name == title) { if (editorVal != val.value) { sEditorVal(val.value); } } }); } }, [editorList]); useEffect(() => { //點選按鈕校驗 if (editorListErr && editorListErr != 1) { takeEditorValue(); } }, [editorListErr]); const onEditorDidMount = (editors) => { // editor.setSize('width', 'height'); // 設定編輯器寬高 // 繫結其他快捷鍵, 這裡以按下ctrl-1 格式化編輯器程式碼做示例 // editor.addKeyMap({ // F1: autoFormatSelection(), // }); };
//格式化 const autoFormatSelection
= () => { let editor = formRefs.current.editor; if (props.type != 'sql') { // console.log(editor, 1); const script_length = editor.getValue().length; const startPos = { line: 0, ch: 0, sticky: null }; const endPos = editor.doc.posFromIndex(script_length); editor.setSelection(startPos, endPos); editor.autoFormatRange(startPos, endPos); editor.commentRange(false, startPos, endPos); } else { let splCont = ''; splCont = editor.getValue(); editor.setValue(sqlFormatter.format(splCont)); } };
//失焦點儲存 const takeEditorValue
= () => { let text = formRefs.current ? formRefs.current.editor.getValue() || '' : ''; // console.log(editorList,'editortexttexttexttextList') rules && !text ? sEditorBorder('1px solid red') : sEditorBorder('none'); props.getEditorList( { name: title, value: text, }, editorList ); }; // console.log(props.type); return ( <div className={styles.editors} style={{ border: editorBorder }} key={props.title + 'editors'}> <CodeMirror className={styles.editorsDom} ref={formRefs} key={props.title} editorDidMount={onEditorDidMount} value={editorVal} options={{ lineNumbers: true, mode: { name: props.type == 'sql' ? 'text/x-sql' : 'application/json' }, extraKeys: { Ctrl: autoFormatSelection }, autofocus: false, styleActiveLine: true, theme: 'dracula', lineWrapping: true, foldGutter: true, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], lint: false, indentUnit: 2, cursorHeight: 0.85, placeholder: props.placeholder || '', }} onBlur={() => { takeEditorValue(); //失去焦點儲存 }} /> {editorBorder != 'none' ? ( <div className={styles.editorsErrTxext} key={props.title + 'editorsErrTxext'} style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', color: '#f5222d' }} > {props.placeholder} </div> ) : ( '' )} </div> ); }; export default Editors;

算了,直接貼程式碼吧,不想寫了,只是想打斷一下將近兩年沒來的記錄

 

 

 

.editors{
    width: 100%;
    height: 100%;
    position: relative;
    
    .editorsDom{
        font-size: 16px;
        line-height: 26px;
        // border: 1px solid #e8e8e8;
    }
    .editorsErrTxext{
        position: absolute;
        left: 0;
        bottom: -24px;
        clear: both;
        min-height: 24px;
        margin-top: -2px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 15px;
        line-height: 1.5;
        transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)
    }
    :global(.CodeMirror) {
        min-height: 218px !important;
        height: auto !important;
        max-height: 747px !important;
    }
    :global(.CodeMirror-scroll) {
        min-height: 218px !important;
        height: auto !important;
        max-height: 747px !important;
    }

    :global(.CodeMirror-gutter-wrapper) {
        left: -40px !important;
    }
}

嗯。。。樣式。。。

 

 

 

 嗯。。。效果

這個是封裝的元件,好了,就這吧。

 

 

 

 

extendCodeMirror.js檔案,我優化了一下

// extendCodeMirror.js
/* eslint-disable */
import * as CodeMirror from 'codemirror';

CodeMirror.extendMode("css", {
commentStart: "/*",
commentEnd: "*/",
newlineAfterToken: function(type, content) {
  return /^[;{}]$/.test(content);
}
});

CodeMirror.extendMode("javascript", {
commentStart: "/*",
commentEnd: "*/",
// FIXME semicolons inside of for
newlineAfterToken: function(type, content, textAfter, state) {
  if (this.jsonMode) {
    return /^[\[,{]$/.test(content) || /^}/.test(textAfter)|| /^]/.test(textAfter);
  } else {
    if (content == ";" && state.lexical && state.lexical.type == ")") return false;
    return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
  }
}
});

CodeMirror.extendMode("xml", {
commentStart: "<!--",
commentEnd: "-->",
newlineAfterToken: function(type, content, textAfter) {
  return type == "tag" && />$/.test(content) || /^</.test(textAfter);
}
});

// Comment/uncomment the specified range
CodeMirror.defineExtension("commentRange", function (isComment, from, to) {
var cm = this, curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode;
cm.operation(function() {
  if (isComment) { // Comment range
    cm.replaceRange(curMode.commentEnd, to);
    cm.replaceRange(curMode.commentStart, from);
    if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
      cm.setCursor(from.line, from.ch + curMode.commentStart.length);
  } else { // Uncomment range
    var selText = cm.getRange(from, to);
    var startIndex = selText.indexOf(curMode.commentStart);
    var endIndex = selText.lastIndexOf(curMode.commentEnd);
    if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
      // Take string till comment start
      selText = selText.substr(0, startIndex)
      // From comment start till comment end
        + selText.substring(startIndex + curMode.commentStart.length, endIndex)
      // From comment end till string end
        + selText.substr(endIndex + curMode.commentEnd.length);
    }
    cm.replaceRange(selText, from, to);
  }
});
});

// Applies automatic mode-aware indentation to the specified range
CodeMirror.defineExtension("autoIndentRange", function (from, to) {
var cmInstance = this;
this.operation(function () {
  for (var i = from.line; i <= to.line; i++) {
    cmInstance.indentLine(i, "smart");
  }
});
});

// Applies automatic formatting to the specified range
CodeMirror.defineExtension("autoFormatRange", function (from, to) {
var cm = this;
var outer = cm.getMode(), text = cm.getRange(from, to).split("\n");
var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
var tabSize = cm.getOption("tabSize");

var out = "", lines = 0, atSol = from.ch == 0;
function newline() {
  out += "\n";
  atSol = true;
  ++lines;
}

for (var i = 0; i < text.length; ++i) {
  var stream = new CodeMirror.StringStream(text[i], tabSize);
  while (!stream.eol()) {
    var inner = CodeMirror.innerMode(outer, state);
    var style = outer.token(stream, state), cur = stream.current();
    stream.start = stream.pos;
    if (!atSol || /\S/.test(cur)) {
      out += cur;
      atSol = false;
    }
    if (!atSol && inner.mode.newlineAfterToken &&
        inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i+1] || "", inner.state))
      newline();
  }
  if (!stream.pos && outer.blankLine) outer.blankLine(state);
  if (!atSol) newline();
}

cm.operation(function () {
  cm.replaceRange(out, from, to);
  for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
    cm.indentLine(cur, "smart");
  cm.setSelection(from, cm.getCursor(false));
});
});
// console.log("初始化CodeMirror完成");
export default CodeMirror;

 

 

 <EditorDom
    title={item.name}
    editorListErr={editorListErr}      //嗯,忘了幹啥了,時間有點長。。。可能也沒啥用吧,剛學react時候寫的
    placeholder={item.placeholder} //為空顯示  
    type="json"                    
    key={'JsonEditors'}        
    rules={item.rules}           //是否校驗不為空
    editorList={editorList}      //資料,多個編輯器情況下
    getEditorList={getEditorList}    // 拿到最新內容,修改editorList
/>

 

 

就這了吧,有很多可優化的地方,也不改了吧,就這吧。