Django使用Ace实现在线编辑器
前言:最近自己开发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
Django使用Ace实现在线编辑器的更多相关文章
- Ace在线编辑器使用requirejs配置
Ace代码在线编辑器如果需要在requirejs里使用,注意需要使用github上lib/ace目录的文件. 如果使用ajaxorg/ace-builds下面的代码再使用requirejs会报错,不能 ...
- 在线编辑器ACE Editor的使用
ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...
- ACE Editor在线代码编辑器简介及使用引导
转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 在线编辑器的使用-KindEditor
第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- Method Draw – 很好用的 SVG 在线编辑器
Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程
UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...
随机推荐
- Apache配置虚拟目录+Zend Studio访问
1 概述 Apache配置虚拟目录,然后可以通过Zend Studio的工程去访问,只需要修改Apache的httpd.conf文件. 2 修改httpd.conf 找到Apache安装目录下的htt ...
- 为什么 DNS 协议使用 UDP?只使用了 UDP 吗?
尽人事,听天命.博主东南大学硕士在读,携程 Java 后台开发暑期实习生,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收 ...
- goloader - golang动态加载的实现
github地址:https://github.com/dearplain/goloader 这里有以前的一些思路:http://www.cnblogs.com/dearplain/p/8145985 ...
- .NET 中的 Worker Service 入门介绍
翻译自 Steve Gordon 2020年3月30日的文章 <WHAT ARE .NET WORKER SERVICES?> [1] 随着 .NET Core 3.0 的发布,ASP.N ...
- FastAPI + Vue 前后端分离 接口自动化测试工具 apiAutoTestWeb
apiAutoTestWeb使用说明 apiAutoTestWeb是为apiAutoTest的可视化版本,其采用前后端分离(FastAPI + Vue2)方式实现 具体使用: Python3 + Fa ...
- Python中zipfile压缩文件模块的使用
目录 zipfile 压缩一个文件 解压文件 高级应用 利用 zipfile 模块破解压缩文件口令:Python脚本破解压缩文件口令 zipfile Python 中 zipfile 模块提供了对 z ...
- XCTF-wtf.sh-150
wtf.sh-150 题目描述 没有描述 解题过程 打开之后是个论坛,有注册和登录功能点 抓包发现,登陆成功后会设置cookie <script>document.cookie = 'US ...
- upload
File saveDir=new File("D:/Test/UPLOAD"); if(!saveDir.isDirectory()){ saveDir.mkdirs(); } F ...
- 【技巧】使用xshell和xftp连接centos连接配置
说明:xshell用来执行指令,xftp用来上传和下载文件. ① 这是xshell连接属性: ②.这是xftp连接属性 附件:这里给个xshelll和xftp的免安装的破解版本地址.侵删. 度娘链接: ...
- 建立AD域,修改密码后不重启生效命令
net user administrator /passwordreq:yes