codeMirror【web代码编辑器】

网上关于这个使用的介绍较少，官方文档是英文，对于英语残废（没错就是我-.-）不是很友好，防止以后还会使用，记录一下碰到的坑和使用过程

下载：

yarn add codemirror
yarn add react-codemirror2

引入：

import Cm from './extendCodeMirror.js'; // 初始化编辑器的格式化代码的功能
import { UnControlled as CodeMirror } from 'react-codemirror2';
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'; // 代码折叠
import 'codemirror/addon/hint/javascript-hint.js'; // 自动提示
import 'codemirror/addon/hint/show-hint.js'; // 自动提示
import 'codemirror/addon/lint/lint.js'; // 错误校验
import 'codemirror/addon/lint/javascript-lint.js'; // js错误校验
import 'codemirror/addon/selection/active-line.js'; // 当前行高亮
import 'codemirror/addon/edit/closetag.js';
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/lib/codemirror.js';
// 语言包（codemirror/mode目录下有目前支持的语言包，有额外需要可以自行导入）
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/groovy/groovy.js';
// css
import 'codemirror/addon/fold/foldgutter.css'; // 代码折叠
import 'codemirror/addon/hint/show-hint.css'; // 自动提示
import 'codemirror/addon/lint/lint.css'; // 代码错误提示
import 'codemirror/lib/codemirror.css'; // 编辑器样式
import 'codemirror/theme/darcula.css'; // 主题: darcula
import 'codemirror/theme/solarized.css';
// 语法校验需要找到对应的语法校验包或者手写校验规则放入到enums中，例子如下：
// @ts-ignore
// jshint.js
//链接: https://pan.baidu.com/s/1mdTArljNyDybKOqKIL2XQQ 提取码: d2b2 复制这段内容后打开百度网盘手机App，操作更方便哦
const jshint = require('@/enums/jshint'); // jshit.js
window.JSHINT = jshint.JSHINT;

使用：

1、主体

const codeMirror = props => {let {code, //代码mode, //语言onChange, //输入事件onBlur, //失焦事件readOnly = true, //是否只读smartIndent = false, //智能缩进indentUnit = 4, //缩进codeMirrorDidMount, //暴露给父的实例} = props;return (<><CodeMirroreditorDidMount={editor => {onEditorDidMount(editor);if (codeMirrorDidMount) {codeMirrorDidMount(editor);}}}value={code}options={{smartIndent: smartIndent, //是否智能缩进extraKeys: {//配置按键'Alt-1': 'autocomplete', // 按下`alt`时出现代码提示},foldGutter: true, //代码块折叠gutters: ['CodeMirror-linenumbers','CodeMirror-foldgutter','CodeMirror-lint-markers',], //代码块折叠autoCloseTags: true, //自动闭合标签autoCloseBrackets: true, //自动闭合标签lineNumbers: true, // 显示行号lineWrapping: false, // 自动换行styleActiveLine: true, // 选中行高亮indentWithTabs: true, //缩进的时候，是否把前面的N*tab大小的空间转化为N个tab字符，默认为falsemode: mode || 'javascript',theme: 'darcula', // 主题配置matchBrackets: true, // 匹配括号hintOptions: { hint: synonyms }, // 自动提示配置allowDropFileTypes: ['text/html', 'text/javascript', 'text/css', 'text/plain'], //规定哪些文件可以拖进编辑器lint: true, // 代码出错提醒indentUnit: indentUnit, // 缩进配置（默认为2）readOnly: readOnly, //是否只读}}onChange={(instance: CodeMirror, data, value) => {if (onChange) {onChange(instance, data, value);}}}onBlur={(instance: CodeMirror) => {if (onBlur) {onBlur(instance);}}}/></>);
};

2、快捷键格式化

const onEditorDidMount = editor => {// 绑定其他快捷键, 格式化编辑器代码做示例let autoFormatSelection = () => {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);};editor.addKeyMap({'Ctrl-Alt-L': autoFormatSelection,});
};

3、代码提示

const synonyms = (cm, option) => {// let comp = ['add', 'ever', 'ada'];// 根据目前的结果来看，如果想要使用代码提示功能，需要手动建立一个提示字典用来提示，根据语言的选择建立多个字典引入let comp = []; //要提示的代码return new Promise(function (accept) {setTimeout(function () {var cursor = cm.getCursor(),line = cm.getLine(cursor.line);var start = cursor.ch,end = cursor.ch;while (start && /[a-zA-Z0-9_.]/.test(line.charAt(start - 1))) --start;while (end < line.length && /[a-zA-Z0-9_.]/.test(line.charAt(end))) ++end;var word = line.slice(start, end);var result_comp = [];for (let i = 0; i < comp.length; i++) {if (comp[i].indexOf(word) !== -1) {result_comp.push(comp[i]);}}if (result_comp.length) {return accept({list: result_comp,from: Cm.Pos(cursor.line, start),to: Cm.Pos(cursor.line, end),});} else {return accept(null);}}, 50);});
};

4、封装使用

<ReactCodeMirrorcodeMirrorDidMount={(editor) => {editor.setSize('', '500px'); // 设置编辑器宽高}}smartIndent={true}code={JSON.stringify(bodyDataSource?.requestJsonStr, null, 2)}mode={{ name: 'javascript', json: true }}readOnly={false}onChange={(instance, data, value) => {bodyRequestJsonStr = value;}}
></ReactCodeMirror>;

codeMirror使用记录相关推荐

vue-element-admin 的使用记录（三）
vue-element-admin 的使用记录 vue-element-admin与vue 的学习使用记录(一) vue-element-admin与vue 的学习使用记录(二) vue-elemen ...
codemirror 插件使用总结
最近工作中需要用到网页端代码编辑器.在此使用code-mirror插件作为提供者,以下总结一些遇到的问题及解决方案: 参考手册: vue-codemirror 地址: https://github.c ...
工作记录：举步维艰的在线 word 之旅 - tinymce
项目中需要实现 "在线编辑 word 模板" 的功能,我打算使用富文本组件 tinymce ,因为业务需求比较特殊,研究一下 tinymce 是否能实现. 如何在 vue 项目中引 ...
mysql web工具 jar_websql: websql网页sql管理工具，在线执行SQL，管理数据源，常用sql记录，体积小，傻瓜式便捷，jar运行。...
WEBSQL 介绍 WEBSQL由JAVA语言纯编,H2内嵌数据库.完全开源,体积小,傻瓜式,开箱即用. ---简约而不简单动态配置MYSQL,ORACLE等关系型数据库源,保存SQL文本实时获取, ...
代码编辑器CodeMirror使用总结-配置理解说明
本文的选项是根据官网的配置环境进行的理解,有些选项没有使用到和没有理解的就没做说明,有理解不对的欢迎指出来,对没有说明的也欢迎用过的友友给出自己的理解常用选项配置 value 编辑器的初始值 - [ ...
基于 Vue + Codemirror 实现 SQL 在线编辑器
一.项目介绍本项目是基于 Vue2 + Codemirror 开发的 Web 版 SQL 编辑器,提供了以下功能: 在线运行 SQL 语句实时命令提示(支持表名.字段名.SQL关键词提示) 查看 ...
mysql建立联合索引，mysql建立唯一键，mysql如何解决重复记录联合索引
在项目中,常常要用到联合唯一在一些配置表中,一些列的组合成为一条记录. 比如,在游戏中,游戏的分区和用户id会形成一条记录.(比如,一个qq用户可以在艾欧尼亚.德玛西亚创建两个账号) 添加联 ...
实现连续15签到记录_MySQL和Redis实现用户签到，你喜欢怎么实现？
现在的网站和app开发中,签到是一个很常见的功能如微博签到送积分,签到排行榜微博签到如移动app ,签到送流量等活动, 移动app签到用户签到是提高用户粘性的有效手段,用的好能事半功倍! 下面 ...
记录一次http请求失败的问题分析
问题背景当前我有一个基于Flask编写的Restful服务,由于业务的需求,我需要将该服务打包成docker 镜像进行离线部署,原始服务的端口是在6661端口进行开启,为了区分,在docker中启动 ...

codeMirror使用记录

codeMirror【web代码编辑器】

下载：

引入：

使用：

1、主体

2、快捷键格式化

3、代码提示

4、封装使用

codeMirror使用记录相关推荐

最新文章

热门文章