前端代码编辑器ace 语法验证

本文主要是介绍实际项目中如何加入语法检测功能。官方文档链接https://github.com/ajaxorg/ace/wiki/Syntax-validation

代码编辑器ace,使用webworker进行实时语法检查。目前支持JavaScript,json,php,coffeescript,css,xquery模式。
      根据官方https://ace.c9.io/#nav=higlighter的例子,在项目开发中,新增了Formula的语法高亮,下面是定义Mode并增加语法高亮的部分代码
      //parserNet是parser模块,在发生错误的时候会主动调用parseError方法

至于怎么实现语法检测的功能,比较复杂,涉及到编译原理,语法词法分析的知识。这个我了解的也只是入门,有时间的时候再介绍吧

ace.define("ace/mode/formula", ["require", "exports", "module", "ace/lib/oop", "ace/mode/text", "ace/mode/formula_highlight_rules"], function (acequire, exports, module) {

    var oop = acequire("../lib/oop");
    var TextMode = acequire("./text").Mode;
    var FormulaHighlightRules = acequire("./formula_highlight_rules").FormulaHighlightRules;

    var Mode = function () {
        this.HighlightRules = FormulaHighlightRules;
        this.$behaviour = this.$defaultBehaviour;
    };
    oop.inherits(Mode, TextMode);

    (function () {
        this.lineCommentStart = "//";
        this.$id = "ace/mode/formula";

        this.createWorker = function (session) {
            var worker = {
                //编辑器销毁或修改模式的时候
                terminate: function () {
                    session.clearAnnotations(); //清除错误信息
                    this.$worker = null;
                    if (this.$doc)
                        this.$doc.off("change", this.changeListener);
                    this.changeListener = null;
                    this.$doc = null;
                },
                //文档变化的回调
                _changeListener: function () {
                    if (!this.$doc) return;
                    var val = this.$doc.getValue();
                    if (val.trim() === "") {
                        session.clearAnnotations(); //清除错误信息
                        return;
                    }
                    var res = [];
                    //重写parserNet.parseError方法,收集错误信息
                    parserNet.parseError = function (str, obj) {
                        var column = obj.loc ? obj.loc.first_column : 0;
                        res.push({
                            column: column,
                            raw: str,
                            row: obj.line,
                            text: str,
                            type: "error"
                        })
                    }
                    try {
                        //parserNet.parse实时检测代码功能
                        parserNet.parse(val);
                    } catch (e) {
                    }
                    session.setAnnotations(res)//显示错误信息
                },
                //绑定文档对象的时候
                attachToDocument(doc) {
                    if (this.$doc)
                        this.terminate();
                    this.$doc = doc;
                    this.changeListener = _.debounce(this._changeListener.bind(this), 500);
                    this.changeListener();
                    //绑定change文档事件
                    doc.on("change", this.changeListener);
                },
                //响应weoker中发出的消息,this.sender.emit("annotate",[])消息,也可以定义其他的消息名称
                annotate(results) {
                    session.setAnnotations(results);
                }
            };            //绑定文档
            worker.attachToDocument(session.getDocument());
            return worker;
        };
    }).call(Mode.prototype);

在实际项目中,有可能是给ace已存在的高亮增加语法检测,下面是webpack打包项目中的写法,主要参考怎么引用已存在的ace模式

import ‘brace/mode/mysql.js‘
import {parserMySql} from ‘../mysql/mysqlParser.js‘;
var MysqlMode = ace.acequire("ace/mode/mysql").Mode;
(function () {
    this.createWorker = function (session) {
        var worker = {
            terminate: function () {
                session.clearAnnotations();
                this.$worker = null;
                if (this.$doc)
                    this.$doc.off("change", this.changeListener);
                this.changeListener = null;
                this.$doc = null;
            },
            _changeListener: function () {
                if (!this.$doc) return;
                var val = this.$doc.getValue();
                var res = [];
                parserMySql.parseError = function (str, obj) {
                    var column = obj.loc ? obj.loc.first_column : 0;
                    res.push({
                        column: column,
                        raw: str,
                        row: obj.line,
                        text: str,
                        type: "error"
                    })
                }
                if (val.trim().length === 0) {
                    res.push({
                        column: 0,
                        raw: "该字段不能为空",
                        row: 0,
                        text: "该字段不能为空",
                        type: "error"
                    })
                } else {
                    try {
                        parserMySql.parse(val);
                    } catch (e) {
                    }
                }
                session.setAnnotations(res)
            },
            attachToDocument(doc) {
                if (this.$doc)
                    this.terminate();
                this.$doc = doc;
                this.changeListener = _.debounce(this._changeListener.bind(this), 500);
                this.changeListener();
                doc.on("change", this.changeListener);
            },
            annotate(results) {
                session.setAnnotations(results);
            }
        };
        worker.attachToDocument(session.getDocument());
        return worker;
    };
}).call(MysqlMode.prototype);

原文地址:https://www.cnblogs.com/legu/p/8330947.html

时间: 2024-10-27 07:55:52

前端代码编辑器ace 语法验证的相关文章

前端代码编辑器ace 语法提示 代码提示

本文主要是介绍ace编辑器的语法提示,自动完成.其实没什么可特别介绍的,有始有终吧,把项目中使用到的ace的功能都介绍下. { enableBasicAutocompletion: false, //boolea 或 completer数组, enableLiveAutocompletion: false, //boolean 或 completer数组, enableSnippets: false, // boolean } completer,就是拥有一个getCompletions(edi

一切从编辑器说起:web前端代码编辑器

俗话说:工欲善其事,必先利其器. 工欲善其事必先利其器.谓工匠想要使他的工作做好,一定要先让工具锋利.比喻要做好一件事,准备工作非常重要. 前端写代码也是一样,需要一个好的适合自己的代码编辑器. 我想大多数人接触前端,都是从 dreamweaver 开始的. dreamweaver大而全,面面俱到. 代码模式,设计模式,拆分模式,实时预览... 在前端这条路上,经常使用,即便是现在也会用用.它有个代码关联的功能: 到现在我使用的 sublime text .WebStorm 也没有发现类似的插件

集成代码编辑器ACE的经验

ACE是最流行的在线代码编辑器之一,在CanTK的集成开发环境GameBuilder里也使用了ACE.ACE的功能非常强大,但是由于使用方法不当,大家反映GameBuilder的代码编辑器不好用.最近花了点时间去完善它,这里把遇到的问题写出来,供有需要的朋友参考. 1.Linux下代码显示与输入不一致. Fedora下代码显示与输入不一致,水平方向上,输入位置是代码显示的一倍.这个问题困扰了我很久,它让代码编辑器根本没法使用.升级操作系统和ACE到最新版本,也无法解决这个问题,而且大部分使用AC

Android平台上最好的几款免费的代码编辑器

使用正确的开发工具能够快速有效地完成源代码的编写和测试,使编程事半功倍.在网络信息高速发展的今天,移动设备的方便快捷已经深入人心,越来越多的程序员会选择在任何感觉舒适的地方使用移动设备查看或者编辑源代码.于是,Android平台上大量基于代码编程的应运而生,谷歌应用商店里的代码编辑器.编译器和开发环境比比皆是.由于不同的工具特性和缺点不尽相同,因此如何选择一款最适合自己的开发工具便成了一件头疼的事情.在这里,我们列出了Android平台上5款最好的代码编辑器来帮助你作出选择. 1. Quoda

最好用的web端代码文本编辑器ACE

使用足够简单,功能足够强大,体验足够优秀 之前有一个系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,总共发了四篇文章介绍了三个非常棒的插件,分别是bootstrap-duallistbox.select2和datatables,今天再更此系列,让好东西让更多的人知道,受益! 本次介绍ace.js,这是一个用JavaScript编写的独立代码编辑器.支持超过120种语言的语法高亮,超过20个不同风格的主题,同时还支持实时语法检查,自定义快捷键绑定,代码折叠,搜索替换,自动缩进等等功能

HBuilder:一个不错的web前端IDE(代码编辑器)

Web前端开发,2000之后基本就是三剑客的天下.到现在DW也是不错的HTMLcoder,如今的前端开发早已是JS的天下.但是DW对于JS方面就弱爆了.DW虽然支持JS语法高亮也支持JQuery JqueryMobile 甚至还支持Phonegap.但是对于JS的支持到了有的程度而已,语法高亮.语法提示仅此而已了.我们需要的是什么呢? 1.高度匹配的语法提示,例如我定义了哪些空间,语法提示至少可以自动提示控件的ID,控件对应的方法函数,自定义函数的语法提示. 2.JS与HTML的大纲导航 3.J

JS代码高亮编辑器 ace.js

JS代码高亮编辑器 ace.js 字数254 阅读2 评论0 喜欢0 瞎扯 ace 是 js 实现的代码编辑器 编译打包之后的 ACE 代码 官网,未提供编译好的文件 ACE 拥有的特点 语法高亮超过110种语言 超过20个主题 自动缩进 减少缩进 一个可选的命令行处理庞大的文件(400万线似乎是极限!) 完全自定义的键绑定,包括vim和Emacs模式 用正则表达式的搜索和替换 突出显示匹配的括号 软标签和实际标签之间切换 显示隐藏字符 使用鼠标拖放文本 换行 代码折叠 多个光标和选择 现场语法

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

Android 代码编辑器中实现代码语法高亮

想写一款Android手机上的代码编辑器,实现类似c4droid中代码语法高亮 通过Android中的控件WebView中嵌入html网页,html引入CodeMirror这个第三方库就可以了,其实就是把网页版的代码高亮实现方法搬到Android上,目前不知道有没有其他比较好的方法. 具体实现请参考Android WebView的使用,以及HTML +CodeMirror的使用