編輯器react-codemirror2的封裝元件簡單使用
阿新 • • 發佈:2022-04-14
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
/>
就這了吧,有很多可優化的地方,也不改了吧,就這吧。