React中CodeMirror插件的使用及封装
2024-03-31 08:47:59
目录
一、CodeMirror是什么
二、React中CodeMirror的基本使用介绍
（一）引入CodeMirror
1. 安装CodeMirror插件
2.引入 CodeMirror 插件
（二）引入文件配置
（三）关键属性解读
1.value
2.mode
3.theme
4.readOnly
5.options
（四）CodeMirror内容更新
三、CodeMirror的封装详解
一、CodeMirror是什么
在前端交互丰富的业务场景中，难免会遇到需要编译器的情况。CodeMirror是一个代码编辑器组件，可以嵌入到Web页面中。用来满足代码书写的交互场景。
例如：
二、React中CodeMirror的基本使用介绍
详细的中文文档参考博客：CodeMirror用户手册_LingMax2013的博客-CSDN博客_codemirror中文文档
英文文档参考官网：
CodeMirror 5 User Manual
（一）引入CodeMirror
1. 安装CodeMirror插件
npm install codemirror react-codemirror2 --save //安装CodeMirror
2.引入 CodeMirror 插件
import CodeMirror from 'react-codemirror';（二）引入文件配置
require('codemirror/lib/codemirror.css');//关键信息引入
require('codemirror/theme/seti.css');//引入主题颜色
require('codemirror/addon/display/fullscreen.css');
require('../../styles/codemirror.less');//引入样式
require('codemirror/addon/display/panel');
require('codemirror/mode/xml/xml');//引入编辑语言 xml
require('codemirror/mode/javascript/javascript');//引入编辑语言 JavaScript
require('codemirror/mode/yaml/yaml');//引入编辑语言 yaml
require('codemirror/addon/display/fullscreen');
require('codemirror/addon/edit/matchbrackets');
require ('codemirror/addon/selection/active-line');//代码高亮
require ('codemirror/addon/fold/foldgutter.css'); // 代码折叠
require ('codemirror/addon/fold/foldcode.js');// 代码折叠
require ('codemirror/addon/fold/foldgutter.js'); // 代码折叠
require ('codemirror/addon/fold/brace-fold.js'); // 代码折叠
require ('codemirror/addon/fold/comment-fold.js');// 代码折叠（三）关键属性解读
1.value
作为插件的初始值，写入命令行内。
2.mode
作为鉴定输入文本框的文本类型，如JavaScript和yaml文件。
3.theme
引入的主题。
4.readOnly
设置为是否可读。
5.options
各类配置的集合，作为属性传入CodeMirror插件之中
（四）CodeMirror内容更新
调用官方文档中的setValue方法，具体可查看官方文档。
先获取dom节点，通过ref或者设置id拿到真实的dom节点，在通过dom.setValue设置新的内容。
//使用引入的codemirror组件<CodeMirroroptions={options}value={text ? text :"-" }ref={(c) => this.myCodeMirror = c}//添加ref属性获取dome节点/>
//通过点击事件获取新的内容showDrawer = (val) => {if (this.myCodeMirror != (undefined || null)){const editor = this.myCodeMirror.getCodeMirror();editor.setValue(val)}this.setState({showDrawerswitch: !this.state.showDrawerswitch})}
三、CodeMirror的封装详解
import { Upload } from 'antd';
import React, { PureComponent } from 'react';
import CodeMirror from 'react-codemirror';
import apiconfig from '../../../config/api.config';
import cookie from '../../utils/cookie';
import globalUtil from '../../utils/global';
import styles from './index.less';require('codemirror/lib/codemirror.css');
require('codemirror/theme/seti.css');
require('codemirror/addon/display/fullscreen.css');
require('../../styles/codemirror.less');
require('codemirror/addon/display/panel');
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
require('codemirror/mode/yaml/yaml');
require('codemirror/addon/display/fullscreen');
require('codemirror/addon/edit/matchbrackets');// eslint-disable-next-line react/no-redundant-should-component-update
class CodeMirrorForm extends PureComponent {constructor(props) {super(props);this.state = {fullScreen: false};this.CodeMirrorRef = '';}componentWillReceiveProps(nextProps) {const { name, data, setFieldsValue } = this.props;const { CodeMirrorRef } = this;if (data !== nextProps.data && CodeMirrorRef) {setFieldsValue({[name]: nextProps.data});if (CodeMirrorRef) {const editor = CodeMirrorRef.getCodeMirror();editor.setValue(nextProps.data);}}}saveRef = ref => {this.CodeMirrorRef = ref;const { saveRef = false } = this.props;if (saveRef) {saveRef(ref);}};handleChangeUpload = info => {const { beforeUpload } = this.props;if (beforeUpload) {if (beforeUpload(info.file, false)) {this.handleFile(info);}return null;}return this.handleFile(info);};handleFile = info => {let fileList = [...info.fileList];if (fileList.length > 0) {fileList = fileList.slice(-1);this.readFileContents(fileList, 'file_content');}};readFileContents = fileList => {let fileString = '';const { CodeMirrorRef } = this;const { name, setFieldsValue } = this.props;for (let i = 0; i < fileList.length; i++) {const reader = new FileReader(); // 新建一个FileReaderreader.readAsText(fileList[i].originFileObj, 'UTF-8'); // 读取文件// eslint-disable-next-line no-loop-funcreader.onload = evt => {// 读取完文件之后会回来这里fileString += evt.target.result; // 读取文件内容setFieldsValue({[name]: fileString});if (CodeMirrorRef) {const editor = CodeMirrorRef.getCodeMirror();editor.setValue(fileString);}};}};checkValue = (_, value, callback) => {const { message } = this.props;if (value === '' || !value || (value && value.trim() === '')) {callback(message);return;}callback();};render() {const {Form,getFieldDecorator,formItemLayout,data,label,name,message,width: proWidth,mode,action,beforeUpload,isHeader = true,isUpload = true,isAmplifications = true,disabled = false,titles,bg = '#333',help} = this.props;const { fullScreen } = this.state;let defaultFullScreenStyle = {display: 'flex',justifyContent: 'space-between',cursor: 'pointer',top: '0',textAlign: 'left',background: bg,lineHeight: '1px',padding: '9px 0 6px 0'};if (fullScreen) {defaultFullScreenStyle = Object.assign(defaultFullScreenStyle, {position: 'fixed',right: '5px',width: '100%',zIndex: 99});} else {defaultFullScreenStyle = Object.assign(defaultFullScreenStyle, {position: 'absolute',width: proWidth || '100%',zIndex: 4});}const options = {mode: { name: mode || 'javascript', json: true },lineNumbers: true,theme: 'seti',fullScreen,lineWrapping: true,smartIndent: true,matchBrackets: true,scrollbarStyle: null,showCursorWhenSelecting: true,readOnly: disabled};const token = cookie.get('token');const amplifications = (<spanstyle={{ margin: '0 20px' }}onClick={() => {this.setState({ fullScreen: !this.state.fullScreen });}}>{globalUtil.fetchSvg('amplifications')}</span>);return (<Form.Item{...formItemLayout}label={label}help={help && <span style={{ color: 'red' }}>{help}</span>}className={fullScreen? `${styles.fullScreens} ${styles.childrenWidth}`: styles.childrenWidth}>{getFieldDecorator(name, {initialValue: data || '',rules: [{ required: true, validator: this.checkValue }]})(<CodeMirror options={options} ref={this.saveRef} />)}{amplifications}{isHeader && (<div style={defaultFullScreenStyle}><divstyle={{ lineHeight: '20px', paddingLeft: '30px', color: '#fff' }}>{titles || ''}</div><div>{isUpload && (<Uploadaction={action ||`${apiconfig.baseUrl}/console/enterprise/team/certificate`}showUploadList={false}withCredentialsheaders={{ Authorization: `GRJWT ${token}` }}beforeUpload={beforeUpload || false}onChange={this.handleChangeUpload}>{globalUtil.fetchSvg('uploads')}</Upload>)}{isAmplifications && amplifications}</div></div>)}</Form.Item>);}
}export default CodeMirrorForm;React中CodeMirror插件的使用及封装相关推荐
- react中quill插件的使用
##react中quill的使用 近期使用由于项目需要一款富文本编辑框,本来打算试着使用drift.js写一款富文本编辑器.但由于时间比较紧急最后选择引用第三方插件,在众多富文本插件中初步选择了Qui ...
- react中CodeMirror （代码编辑器）
前言: 实现一个在react项目中页面展示代码编辑器的效果. codemirror: 使用JavaScript为浏览器实现的多功能文本编辑器.codemirror作用:专门用于编辑代码,并带有实现更高 ...
- android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...
- react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
- react文字滚动插件_【赠书】Preact（React）核心原理详解
豆皮粉儿们,又见面了,今天这一期,由字节跳动数据平台的"winge(宝丁)",带大家见识见识前端"轮子"之一Preact框架. 提到Preact,你肯定会先想到 ...
- React中的Portal组件
这可以在这里看:http://leozdgao.me/reactzhong-de-portalzu-jian/ 几个月前遇到了写模态窗(modal)的需求,当初其实没什么思路,不知道怎么用更React ...
- React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 撰文 | 川川 VX-ID:suibichuanji 点 ...
- jquery 监听td点击事件_React 事件 | 1. React 中的事件委托
说到 React 的事件,也算是 React 的一个非常有亮点的优化,它在原生事件体系的基础上,单独实现了一套事件机制.想要了解这个机制,首先的了解下什么是事件委托以及事件委托的好处. 事件委托 假设 ...
- mobx在react中应用_借助React Native Elements，Jest和MobX MST可以轻松实现现实世界中的ReactNative应用...
mobx在react中应用 by Qaiser Abbas 由Qaiser Abbas 借助React Native Elements,Jest和MobX MST可以轻松实现现实世界中的ReactNa ...
最新文章
- mysql 左连接 去重复,MySQL删除左连接,3个表上的重复列
- C#学习小记12实现一个接口
- [机器学习]AutoML --- NNI (Microsoft)
- 论文学习7-Spam Review Detection with Graph Convolutional Networks（阿里巴巴）
- unix系统编码 java_JAVA字符编码系列三：Java应用中的编码问题
- php怎么给接口里的方法传参,PHP接口中方法的参数和实现类方法中的参数可以不一致的问题...
- 微信小程序接口测试时appid为空如何解决
- promiseKit 解析 iOS
- 自学python能找到工作吗-自学Python好找工作吗？
- springboot做网站_Github点赞接近100k的SpringBoot学习教程+实战推荐！牛批！
- Python验证码识别处理实例
- Java中的注释方法
- ADB常用命令及详解
- 数控切削加工尺寸不稳定怎么办？这么办！
- 三星，现代，中颖，合泰，松翰等单片机定时器溢出计算公式
- More Effective C++之 Item M6：自增(increment)、自减(decrement)操作符前缀形式与后缀形式的区别
- 帕金森病的功能性脑连接障碍:一项5年的纵向研究
- Beta 测试和 Alpha 测试有什么区别？
- Linux-2 文件管理（vi 和vim）
- Python Scrapy简单爬虫-爬取澳洲药店，代购党的福音