最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > CodeMirror 基本使用及智能提示

    CodeMirror 基本使用及智能提示

    正文概述 掘金(阿里云数据库前端团队)   2021-04-08   2951

    CodeMirror 是什么

    CodeMirror 是通过 JavaScript 实现的文本编辑器。专门用于编辑代码，带有大量的语言模式和实现更高级的插件功能。

    拥有丰富的编程 API 和 CSS 主题化系统可用于定制 CodeMirror ，使它更适合你的应用和扩展新功能。

    使用 CodeMirror

    首先我们来看下一个最基础的示例，展示一个代码编辑器。

    首先我们创建一个 index.html，并通过 npm 或直接将 CodeMirror 安装到项目里，这里使用 npm 安装。

    npm install --save codemirror

    安装完毕，在页面中引入即可，如下代码即可实现一个最基础的代码编辑器。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/codemirror/lib//codemirror.css">
    <script src="./node_modules/codemirror/lib//codemirror.js"></script>
</head>

<body>
    <textarea id="root"></textarea>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById('root'), {
            lineNumbers: true, // 显示行号
        });
    </script>
</body>

</html>

    支持 SQL

    我们的目标是实现支持 SQL 体验的代码编辑器，那么接下来我们就来配置 SQL。

    引入 Mode

    上述提到 CodeMirror 支持非常多的语言 mode，要让它识别并高亮 SQL 的话，就要引入 sql 的 mode。

    <!-- 添加 SQL mode -->
<script src="./node_modules/codemirror/mode/sql/sql.js"></script>

    到这里我们在编辑器中输入 SELECT * FROM TABLE; ，可以看到代码编辑器已经可以正确的关键字高亮展示了。

    接下来我们再来完善下代码编辑器的体验，让它支持括号匹配、自动补全等。

    括号匹配

    <!--括号匹配-->
<script src="./node_modules/codemirror/addon/edit/matchbrackets.js"></script>

    引入对应的插件之后，在传入的配置项中添加 matchBrackets:true 即可开启括号匹配。

    自动补全

    引入智能提示相关插件。

    <!--自动补全-->
<link rel="stylesheet" href="./node_modules/codemirror/addon/hint/show-hint.css">
<script src="./node_modules/codemirror/addon/hint/show-hint.js"></script>
<script src="./node_modules/codemirror/addon/hint/sql-hint.js"></script>

    
/**
 * 忽略自动提示的 token
 */
const ignore = ['', '#', '!', '-', '=', '@', '$', '%', '&', '+', ';', '(', ')', '*'];
const ignoreToken = (text) => {
  if (text && text[0]) {
    for (const pre in ignore) {
      if (ignore[pre] === text[0]) {
        return true;
      }
    }
  } else {
    return true;
  }
  return false;
};

editor.on("change", function (editor, change) {
  if (change.origin == "+input") {
    var text = change.text;
    //不提示
    if (!ignoreToken(text))
      setTimeout(function () { 
        editor.execCommand("autocomplete");
      }, 20);
  }
});

    完整的代码如下

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./node_modules/codemirror/lib//codemirror.css">
    <script src="./node_modules/codemirror/lib//codemirror.js"></script>
    <!-- 添加 SQL mode -->
    <script src="./node_modules/codemirror/mode/sql/sql.js"></script>
    <!--括号匹配-->
    <script src="./node_modules/codemirror/addon/edit/matchbrackets.js"></script>
    <!--自动补全-->
    <link rel="stylesheet" href="./node_modules/codemirror/addon/hint/show-hint.css">
    <script src="./node_modules/codemirror/addon/hint/show-hint.js"></script>
    <script src="./node_modules/codemirror/addon/hint/sql-hint.js"></script>
</head>

<body>
    <textarea id="root"></textarea>
    <script>
    var editor = CodeMirror.fromTextArea(document.getElementById('root'), {
	mode: 'text/x-mysql',
        lineNumbers: true,
	matchBrackets: true,
	hintOptions: {
            tables: {
		table1: ['name', 'score', 'birthDate'],
		table2: ['name', 'population', 'size']
            }
	}
	});
	/**
	* 忽略自动提示的token
	*/
	const ignore = ['', '#', '!', '-', '=', '@', '$', '%', '&', '+', ';', '(', ')', '*'];
	const ignoreToken = (text) => {
	if (text && text[0]) {
		for (const pre in ignore) {
			if (ignore[pre] === text[0]) {
				return true;
			}
		}
	} else {
		return true;
	}
            return false;
        };

	editor.on("change", function (editor, change) {//任意键触发autocomplete
            if (change.origin == "+input") {
		var text = change.text;
		if (!ignoreToken(text))//不提示
                    setTimeout(function () { editor.execCommand("autocomplete"); }, 20);
		}
	});

	</script>
</body>

</html>

    通过以上的配置，我们在输入 SQL 语句的时候，已经可以看到有自动提示补全代码功能了，那么如果我们一般的 SQL 输入需求是基于相关的数据库信息来进行提示的，以上默认的提示信息已经无法满足我们的需求了。那么接下来我们来看下自定义的智能提示该如何实现。

    自定义 hint

    CodeMirror 提供的 SQL 提示已经可以满足大部分场景了，但业务的高要求，我们还是要继续提升用户的体验。如支持数据库、表名、字段名的只能提示，默认的 sql-hint 已经无法满足需求了，基于此我们可以替换默认的 sql-hint 或者自定义一个 hint 来满足我们的需求。

    CodeMirror 提供了一个静态方法来支持自定义 hint 功能。

    CodeMirror.registerHelper('hint', 'custom', function (editor, options) {
  return {
    list: ['custom-hint'],
    from: CodeMirror.Pos(cur.line, curr.start),
    to: CodeMirror.Pos(cur.line, curr.end),
  };
});

    以上可以看到一个最简单的自定义 hint 完成了。基于此，我们可基于editor 提供的 getValue 方法，获取当前的 token，再通过分析返回我们想要的自定义值即可达到更好的智能提示效果了。

    参考

    • CodeMirror

    起源地下载网 » CodeMirror 基本使用及智能提示

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(阿里云数据库前端团队)

    掘金(阿里云数据库前端团队) SVIP

    分享到：

    相关推荐

    发表评论

    最新 最早 热门 我的牛评
    你馬子很酷3年前00回复
    CodeMirror.registerHelper('hint', 'custom', function (editor, options) {
      return {
        list: ['custom-hint'],
        from: CodeMirror.Pos(cur.line, curr.start),
        to: CodeMirror.Pos(cur.line, curr.end),
      };
    });
    这段代码无效
    回复(0)

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元