前言:最近自己开发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实现在线编辑器的更多相关文章

  1. Ace在线编辑器使用requirejs配置

    Ace代码在线编辑器如果需要在requirejs里使用,注意需要使用github上lib/ace目录的文件. 如果使用ajaxorg/ace-builds下面的代码再使用requirejs会报错,不能 ...

  2. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  3. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  4. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  5. 在线编辑器的使用-KindEditor

    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...

  6. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  7. Method Draw – 很好用的 SVG 在线编辑器

    Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...

  8. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  9. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程

    UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...

随机推荐

  1. Java后端部署以及与Android通信注意事项

    1 概述 本文列举了一些Android+后端Java通信/部署时的问题以及注意事项,覆盖的问题包括但不限于安全组.数据库.路径等,如果各位读者的Android端不能正常访问Java后端,希望这里的解决 ...

  2. IDEA main 函数的快捷键

    1.main()快捷键:psvm 当输入ps的时候编辑器就会有如下提示,可见比eclipse要很方便 2.System.out.println()快捷键:sout

  3. Java基础练习——读心术(扑克牌魔术——21张扑克牌)

    Java基础练习--读心术(扑克牌魔术--21张扑克牌) 用到了Scanner,for循环,if-else语句,集合,线程的Thread.sleep()方法 话不多说,直接上代码!

  4. AdaBoostClassifier参数

    [AdaBoostClassifier] Adaboost-参数: base_estimator:基分类器,默认是决策树,在该分类器基础上进行boosting,理论上可以是任意一个分类器,但是如果是其 ...

  5. OO博客总结——OO落下帷幕

    OO博客总结--OO落下帷幕 凡此过往,皆为序章. 不知不觉OO课程即将落下帷幕,一路坎坎坷坷磕磕绊绊,可算是要结束了,心里终于松了一口气,也有小小的不甘和遗憾.凡此过往,皆为序章.特殊的线上OO课程 ...

  6. 使用MyQR模块生成二维码

    一.介绍 MyQR 模块是 python 的一个外部库,能够将文本或网址转为二维码,扫了之后就能查看文本或跳转到相应网站. 它是一个外部库,需要导入: pip install -i https://p ...

  7. node运行的第一个helloWorld程序

    hello world 参考链接: https://www.runoob.com/nodejs/nodejs-http-server.html https://npm.taobao.org/ http ...

  8. PHP 导出 Excel 兼容 CSV XlS格式

    class ExcelRead { /** * 获取Excel文件内容 * @param $file * @return mixed * @throws PHPExcel_Reader_Excepti ...

  9. 【转】gitlab CI流水线配置文件.gitlab-ci.yml详解

    目录 GitLab CI流水线配置文件.gitlab-ci.yml详解 实验环境 GitLab CI介绍 .gitlab-ci.yml 配置参数 参数详解 script image services ...

  10. POJ3757 01分数规划

    题意:      有一个任务,给你提供n太服务器,让你在这n太服务器中选出k台完成这个任务,要求是每台服务器的工作时间相同,总的花费最小. 思路:      题目中给出对于每台服务器有这个式子: To ...