技术标签: 自动提示 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/
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数