Ace在线代码编辑器使用「建议收藏」

Ace在线代码编辑器使用「建议收藏」这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401介绍了Ace的使用,本文围绕Ace的api深入介绍其具体功能。官网api使用文档:https://ace.c9.io/#nav=howto1、基本配置:ace有许多的配置项可供选择,通过这些配置项可以打造自己的个性编辑器你可以通过setTheme来设置主题,需要注意的是主题文件要存在,并且需要与ace.js同级,命名规则为theme-主题名.jsedito.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401 介绍了Ace的使用,本文围绕Ace的api深入介绍其具体功能。

官网api使用文档:https://ace.c9.io/#nav=howto

1、基本配置:

ace有许多的配置项可供选择,通过这些配置项可以打造自己的个性编辑器

你可以通过setTheme来设置主题,需要注意的是主题文件要存在,并且需要与ace.js同级,命名规则为theme-主题名.js

editor.setTheme("ace/theme/twilight")

默认情况下编辑器为纯文本模式,你可以通过setMode来设置编辑器对应的语言模式,例如你想让其匹配markdown,就可以像下边这样配置,同样需要语言模式的文件存在,文件与ace.js同级,命名规则为mode-语言模式.js

editor.session.setMode("ace/mode/markdown")

通过setFontSize可以设置编辑器内文本字体的大小

editor.setFontSize(14);

通过setTabSize可以设置制表符的长度

editor.getSession().setTabSize(4);

同时可以通过setUseSoftTabs将制表符变成对应长度的空格

editor.session.setUseSoftTabs(true);

如果你不想编辑,可以通过setReadOnly可以将编辑器设置为只读模式

editor.setReadOnly(true)

默认情况下ace编辑器中会有一道竖线标识打印的边距,可以通过setShowPrintMargin来控制其是否显示

editor.setShowPrintMargin(false);

2、编辑操作

ace可以方便的对编辑器内的数据进行获取和写入,甚至可以只获取选中的内容,同时也能实现获取行数,跳转到行等操作

通过getValue可以获取到编辑器中的全部数据

editor.getSession().getValue()

如果编辑器内有部分数据被选中,则可以通过getSelectionRange来获取选中的部分内容

editor.session.getTextRange(editor.getSelectionRange())

这在特性我实现SQL查询的功能中有用到,如果查询框内有多条SQL,可以选择其中一条SQL进行查询

Ace在线代码编辑器使用「建议收藏」

 

通过setValue可以给编辑器初始化数据

editor.getSession().setValue("ops-coffee.cn")

当你想往编辑器插入数据时,可以通过insert在光标处插入数据

editor.insert('ops-coffee.cn')

通过getLength可以获取到编辑器内数据的总行数

editor.session.getLength()

goLine则可以跳转到指定的行

editor.gotoLine(37)

通过getCursor可以获取到编辑器内光标的位置,输出结果为一个标识行和列的字典,像这样:{row:13,column:37}

editor.selection.getCursor()

3、搜索与替换

ace还实现了强大的搜索和替换功能,可以单个替换也可以全部替换

通过find可以进行搜索

editor.find('ops-coffee', {  
    backwards: false,  
    wrap: false,  
    caseSensitive: false,  
    wholeWord: false,  
    regExp: false  
});  

find后边跟了两个参数, 第一个为要搜索的内容,第二个为搜索配置的字典, 字典内可以配置如下一些参数

  • backwards: 是否反向搜索,默认为false
  • wrap: 搜索到文档底部是否回到顶端,默认为false
  • caseSensitive: 是否匹配大小写搜索,默认为false
  • wholeWord: 是否匹配整个单词搜素,默认为false
  • range: 搜索范围,要搜素整个文档则设置为空
  • regExp: 搜索内容是否是正则表达式,默认为false
  • start: 搜索起始位置
  • skipCurrent: 是否不搜索当前行,默认为false

通过findAll可以高亮显示全部搜索到的内容

editor.findAll();

findNext则可以查找下一个搜索到的内容

editor.findNext(); 

findPrevious查找上一个匹配的内容

editor.findPrevious();  

通过replace可以对当前find查找到的字符串进行替换

editor.replace('ops-coffee.cn'); 

而通过replaceAll则可以对find查找到的所有内容替换

editor.replaceAll('ops-coffee.cn');

需要注意的是,无论是replace还是replaceAll都需要配合find一起使用

4、监听变化

ace另一个强大的地方是实现了对编辑器的监听,除了可以监听内容的变化外,还能监听选中内容的变化,甚至是光标的变化

通过change可以监听到编辑器内容的变化

editor.getSession().on('change', function(e) {
    console.log('内容有变化')
});

changeSelection则可以监听到选择内容的变化

editor.getSession().selection.on('changeSelection', function(e) {
    console.log('选择内容有变化')
});

连光标的变化都可以通过changeCursor监听到

editor.getSession().selection.on('changeCursor', function(e) {
    console.log('监听光标的变化')
});

替换textarea

html中的textarea比较鸡肋,连最基本的换行都无法实现,所以我通常都会用ace来代替form表单中的textarea,但默认情况下submit无法自动获取pre标签的数据做提交,这该如何处理呢?

一种简单的方式就是将textarea隐藏,同时创建一个ace编辑器来取代他,然后检测编辑器内数据的变化自动给填充到textarea内,完整的例子就像下边这样

<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
  <div class="form-group">
    <label class="col-md-2 control-label"> 内容</label>
    <div class="col-md-9">
      <textarea class="form-control" id="form_content" name="content" rows="20"></textarea>
      <pre id="content" style="height:415px"></pre>
    </div>
  </div>
</form>

// 加载ace editor
var editor = ace.edit("content");
var textarea = $('textarea[name="content"]').hide();
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

非常完美的弥补了textarea的不足,简单好用且足够强大

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170420.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 大数据_01【介绍】

    大数据_01【介绍】大数据_01【介绍】大数据特点大数据能做什么【海量数据背景下】大数据行业的应用大数据发展前景大数据部门组织结构什么是大数据 指数据集的大小超过了现有典型数据库软件和工具的处理能力的数据大数据特点海量化 数据量从TB到PB多样化 数据类型复杂,超过百分之八十是非结构化的[结构化数据半结构化数据完全非结构化数据]快速化 数据量在持续增加(两位数的增长率),数据处理速度要求高高价值 在海量多样数据的快速分析下能发挥出更高的数据价值大数据能

  • Java开发手册之OOP规约

    Java开发手册之OOP规约Java开发手册之OOP规约

  • 面试官,不要再问我“Java虚拟机类加载机制”了

    面试官,不要再问我“Java虚拟机类加载机制”了关于Java虚拟机类加载机制往往有两方面的面试题:根据程序判断输出结果和讲讲虚拟机类加载机制的流程。其实这两类题本质上都是考察面试者对Java虚拟机类加载机制的了解。面试题试水现在有这样一道判断程序输出结果的面试题,先看看打印的结果是什么?publicclassSuperClass{static{System.out.println(“SuperCla…

  • 雷达测距和超声波测距_超声波测距的原理是什么

    雷达测距和超声波测距_超声波测距的原理是什么本实验是基于MSP430利用HC-SR04超声波传感器进行测距,测距范围是3-65cm,讲得到的数据显示在LCD1602液晶屏上。模块工作原理如下(1)采用IO触发测距,给至少10us的高电平信号;(2)模块自动发送8个40khz的方波,自动检测是否有信号返回;(3)有信号返回,通过IO输出一高电平,高电平持续的时间就是超声波从发射到返回的时间(4计算测试距离测试距离=(高电平时间*声速(340M/S))/2;根据工作原理,我们可以选择两种模式驱动1.采用中断+定时器

  • django示例_介绍信模板

    django示例_介绍信模板前言目前市面上有非常多的模板系统,其中最知名最好用的就是DTL和Jinja2。DTL是DjangoTemplateLanguage三个单词的缩写,也就是Django自带的模板语言。当然也可以配置

  • php输出一张本地图片_java html转图片

    php输出一张本地图片_java html转图片$img1=’data:p_w_picpath/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlsAAAD4CAIAAABUsLRPAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR42uxdB3hUZdYeQBARXXVVEHDF1bXsumvHLnZFBVHsK6io9GZBaaH3GtJ7T0iZ9N577wQSIC…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号