zoukankan      html  css  js  c++  java
  • Django使用Ace实现在线编辑器

      前言:最近自己开发SQL工单功能,期间接触到了Ace在线编辑器,折腾一下,感觉功能挺多,特意去了解学习一下分享跟大家。

      ACE 是一个功能非常强大的编辑器,实现语法高亮、代码补全功能,还有很多主题,支持多种语言,比如MySQL、Python、HTML、LUA等,可以使用国内免费开源的网站https://www.bootcdn.cn/ace/

    下面给大家实例参考下:

    1.前端HTML代码

    <pre id="code" style="min-height:270px; 700px;">
        <textarea style="min-height:270px; 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


  • 相关阅读:
    “TensorFlow 开发者出道计划”全攻略,玩转社区看这里!
    魔改合成大西瓜
    自定义注解!绝对是程序员装逼的利器!!
    Python中的join()函数的用法
    Python中的split()函数的用法
    linux 完全卸载mysql数据库
    域名被盗后还能不能找回
    在选择域名后缀时应该考虑到的问题
    什么叫域名劫持 和域名解析有什么区别
    河北重大技术需求系统04
  • 原文地址:https://www.cnblogs.com/lucktomato/p/14719736.html
Copyright © 2011-2022 走看看