技术标签: 自动提示 create-react-app react CodeMirror
构建create-react-app,这里忽略······
安装 代码编辑器 CodeMirror 的轻量级 React 组件
npm install @uiw/react-codemirror --save
安装好了之后,就可以直接引入使用了,直接上代码:
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/theme/monokai.css';
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
class App extends React.Component{
render() {
const code = 'var a = 0;';
return (
<div>
<CodeMirror
value={code}
options={
{
theme: 'monokai',
mode: 'JavaScript',
extraKeys: {"Ctrl": "autocomplete"},//ctrl可以弹出提示
styleActiveLine: true
}}
/>
</div>
);
}
}
export default App;
代码解析:
import CodeMirror from '@uiw/react-codemirror'; //引入组件,然后这个<CodeMirror />标签组件就是代码编辑器了
import 'codemirror/theme/monokai.css'; //主题样式 引入后 配置其属性 theme: 'monokai'
import 'codemirror/addon/hint/javascript-hint' //光标所在行突出颜色 引入后 配置其属性 styleActiveLine: true
//JavaScript代码提示功能需要引入三个依赖
import 'codemirror/addon/hint/javascript-hint' //js代码提示语库
import 'codemirror/addon/hint/show-hint' //代码提示功能
import 'codemirror/addon/hint/show-hint.css' //代码提示样式
以上三个依赖引入后,配置其属性
mode: 'JavaScript', //提示语言
extraKeys: {"Ctrl": "autocomplete"},//ctrl可以弹出提示
这样就有了JavaScript的代码提示,这里仅仅用了JavaScript来示范,其他语言同理。
到这里虽然有了提示,但是按一个快捷键才会触发的提示,远没达到我们想要的自动提示的效果。
接下来,想要做成自动提示,一般想到的是,从onChange 函数入手
值得注意的是,CodeMirror不能用onChange函数来触发代码提示功能,会死循环。。
我们用的是 onCursorActivity 事件函数 //当鼠标点击内容区、选中内容、修改内容时被触发
onCursorActivity={e => e.showHint()/*调用显示提示*/}
这样自动提示功能就有了。
但是呢,还有问题需要处理,就是点击和选中,换行,空格,等都会触发提示,而且关键词删除不了等问题。
这样就比较尴尬了,需要优化一下。
打开 import 'codemirror/addon/hint/javascript-hint' 这个的源码。
先找到 scriptHint 函数 ,在该函数最后的 return 调 getCompletions函数,这里开始做手脚。
献上改动的代码部分:
// If it is a property, find out what it is a property of.
while (tprop.type == "property") {
tprop = getToken(editor, Pos(cur.line, tprop.start));
if (tprop.string != ".") return;
tprop = getToken(editor, Pos(cur.line, tprop.start));
if (!context) var context = [];
context.push(tprop);
}
var uValues = this.uValues;//获取上次的内容
this.uValues = editor.getValue();//更新上次内容
var isUpdate = uValues==this.uValues;//比较内容是否和上次的一样
return {list: getCompletions(token, context,isUpdate, keywords, options),
from: Pos(cur.line, token.start),
to: Pos(cur.line, token.end)};
}
找到 getCompletions 函数,添加一下代码:
献上改动的代码:
function getCompletions(token, context,isUpdate, keywords, options) {
//这里是优化 点击,选中和改动 都会触发提示,而且关键词删除不了等问题
var start = this.start;
var end = this.end;
this.start = token.start;
this.end = token.end;
if (token.type == null || (start == this.start && !((end - this.end) == -1))||isUpdate) {
return {list: {}};
}
···
这样就可以完美解决以上问题了。
不过除了关键词的提示外,我们还可以添加我们自定义的提示词哦。
献上全部代码:
import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/theme/monokai.css';
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/selection/active-line'
class App extends React.Component{
MyOnCursorActivity = e =>{
//把自定义的提示词传进去
e.ukeys = ["aaaa","bbbb","cccc"];
//调用显示提示
e.showHint()
}
render() {
const code = 'var a = 0;';
return (
<div>
<CodeMirror
value={code}
onCursorActivity={e => this.MyOnCursorActivity(e)}
options={
{
theme: 'monokai',
mode: 'JavaScript',
styleActiveLine: true
}}
/>
</div>
);
}
}
export default App;
import 'codemirror/addon/hint/javascript-hint' 改动后的代码:
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
var Pos = CodeMirror.Pos;
function forEach(arr, f) {
for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
}
function arrayContains(arr, item) {
if (!Array.prototype.indexOf) {
var i = arr.length;
while (i--) {
if (arr[i] === item) {
return true;
}
}
return false;
}
return arr.indexOf(item) != -1;
}
function scriptHint(editor, keywords, getToken, options) {
// Find the token at the cursor
var cur = editor.getCursor(), token = getToken(editor, cur);
if (/\b(?:string|comment)\b/.test(token.type)) return;
var innerMode = CodeMirror.innerMode(editor.getMode(), token.state);
if (innerMode.mode.helperType === "json") return;
token.state = innerMode.state;
// If it's not a 'word-style' token, ignore the token.
if (!/^[\w$_]*$/.test(token.string)) {
token = {start: cur.ch, end: cur.ch, string: "", state: token.state,
type: token.string == "." ? "property" : null};
} else if (token.end > cur.ch) {
token.end = cur.ch;
token.string = token.string.slice(0, cur.ch - token.start);
}
var tprop = token;
// If it is a property, find out what it is a property of.
while (tprop.type == "property") {
tprop = getToken(editor, Pos(cur.line, tprop.start));
if (tprop.string != ".") return;
tprop = getToken(editor, Pos(cur.line, tprop.start));
if (!context) var context = [];
context.push(tprop);
}
var ukeys = editor.ukeys;//获取用户的自定义的单词
var uValues = this.uValues;//获取上次的内容
this.uValues = editor.getValue();//更新上次内容
var isUpdate = uValues==this.uValues;//比较内容是否和上次的一样
return {list: getCompletions(token, context,ukeys,isUpdate, keywords, options),
from: Pos(cur.line, token.start),
to: Pos(cur.line, token.end)};
}
function javascriptHint(editor, options) {
return scriptHint(editor, javascriptKeywords,
function (e, cur) {return e.getTokenAt(cur);},
options);
};
CodeMirror.registerHelper("hint", "javascript", javascriptHint);
function getCoffeeScriptToken(editor, cur) {
// This getToken, it is for coffeescript, imitates the behavior of
// getTokenAt method in javascript.js, that is, returning "property"
// type and treat "." as indepenent token.
var token = editor.getTokenAt(cur);
if (cur.ch == token.start + 1 && token.string.charAt(0) == '.') {
token.end = token.start;
token.string = '.';
token.type = "property";
}
else if (/^\.[\w$_]*$/.test(token.string)) {
token.type = "property";
token.start++;
token.string = token.string.replace(/\./, '');
}
return token;
}
function coffeescriptHint(editor, options) {
return scriptHint(editor, coffeescriptKeywords, getCoffeeScriptToken, options);
}
CodeMirror.registerHelper("hint", "coffeescript", coffeescriptHint);
var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
"toUpperCase toLowerCase split concat match replace search").split(" ");
var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
"lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
var funcProps = "prototype apply call bind".split(" ");
var javascriptKeywords = ("break case catch class const continue debugger default delete do else export extends false finally for function " +
"if in import instanceof new null return super switch this throw true try typeof var void while with yield").split(" ");
var coffeescriptKeywords = ("and break catch class continue delete do else extends false finally for " +
"if in instanceof isnt new no not null of off on or return switch then throw true try typeof until void while with yes").split(" ");
function forAllProps(obj, callback) {
if (!Object.getOwnPropertyNames || !Object.getPrototypeOf) {
for (var name in obj) callback(name)
} else {
for (var o = obj; o; o = Object.getPrototypeOf(o))
Object.getOwnPropertyNames(o).forEach(callback)
}
}
function getCompletions(token, context,ukeys,isUpdate, keywords, options) {
//这里是优化 点击,选中和改动 都会触发提示,而且关键词删除不了等问题
var start = this.start;
var end = this.end;
this.start = token.start;
this.end = token.end;
if (token.type == null || (start == this.start && !((end - this.end) == -1))||isUpdate) {
return {list: {}};
}
var found = [], start = token.string, global = options && options.globalScope || window;
function maybeAdd(str) {
if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
}
function gatherCompletions(obj) {
if (typeof obj == "string") forEach(stringProps, maybeAdd);
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
if(ukeys!=null&&ukeys.length>0){
forEach(ukeys,maybeAdd);//添加传进来的自定义的单词
}
forAllProps(obj, maybeAdd)
}
if (context && context.length) {
// If this is a property, see if it belongs to some object we can
// find in the current environment.
var obj = context.pop(), base;
if (obj.type && obj.type.indexOf("variable") === 0) {
if (options && options.additionalContext)
base = options.additionalContext[obj.string];
if (!options || options.useGlobalScope !== false)
base = base || global[obj.string];
} else if (obj.type == "string") {
base = "";
} else if (obj.type == "atom") {
base = 1;
} else if (obj.type == "function") {
if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
(typeof global.jQuery == 'function'))
base = global.jQuery();
else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
base = global._();
}
while (base != null && context.length)
base = base[context.pop().string];
if (base != null) gatherCompletions(base);
} else {
// If not, just look in the global object and any local scope
// (reading into JS mode internals to get at the local and global variables)
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
if (!options || options.useGlobalScope !== false)
gatherCompletions(global);
forEach(keywords, maybeAdd);
}
return found;
}
});
如果需要显示用户前面输入过的代码,变量等。还可以用正则表达式,把编辑器的内容拆分出来然后传进提示词里即可:
MyOnCursorActivity 函数,稍微做一下修改如下:
MyOnCursorActivity = e =>{
//获取用户当前的编辑器中的编写的代码
var words = e.getValue() + "";
//利用正则取出用户输入的所有的英文的字母
words = words.replace(/[a-z]+[\-|\']+[a-z]+/ig, '').match(/([a-z]+)/ig);
//把单个字母去除掉
var isFor=true;
while (isFor){
if(words==null){break}
isFor=false;
for(var i=0;i<words.length;i++){
if (words[i].length==1) {
var s=words.splice(i, 1);
isFor=true;
break;
}
}
}
//将获取到的用户的单词传入CodeMirror,并在javascript-hint中做匹配
e.ukeys = words;
//调用显示提示
e.showHint()
}
这个就可以是挺完美的了。
实现的效果案例 : http://mcshop.vip/js/
文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文
文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作 导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释: cwy_init/init_123..._达梦数据库导入导出
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6
文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure
文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf