前言:最近自己开发SQL工单功能,期间接触到了Ace在线编辑器,折腾一下,感觉功能挺多,特意去了解学习一下分享跟大家。
ACE 是一个功能非常强大的编辑器,实现语法高亮、代码补全功能,还有很多主题,支持多种语言,比如MySQL、Python、HTML、LUA等,可以使用国内免费开源的网站https://www.bootcdn.cn/ace/
下面给大家实例参考下:
1.前端HTML代码
<pre id="code" style="min-height:270px;width: 700px;">
<textarea style="min-height:270px;width: 700px" id="sql" placeholder="SQL语句"></textarea>
</pre>
2.前端JS
#导入js
<script src="https://cdn.bootcss.com/ace/1.4.6/ace.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-beautify.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-language_tools.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/mode-mysql.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/theme-monokai.js"></script>
<script>
editor = ace.edit('code');// 这个地方就是id是editor的div
editor.setTheme('ace/theme/monokai'); //主题
var jsMode = ace.require('ace/mode/mysql').Mode; //支持语言
editor.session.setMode(new jsMode()); //引入
editor.setFontSize(18); //设置默认标签大小
editor.setReadOnly(false); //false为可编辑
editor.setOption("wrap","free"); //换行
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,//启用基本自动完成
enableSnippets: true,//启用代码段
enableLiveAutocompletion: true //启用实时自动完成
});
</script>
页面效果图如下:
详细参数可以参考链接如下:
https://www.jianshu.com/p/8a4a5e273538
https://segmentfault.com/a/1190000020423038?utm_source=tag-newest
https://github.com/ajaxorg/ace/tree/master/lib/ace
原文地址:https://www.cnblogs.com/lucktomato
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。