A CodeMirror based WYSIWYG editor with lint (error reporting) can be used to write Funnel Query Language. The editor is easy to add to your project using NPM.
The editor is designed to make it easy to write Funnel Queries for non-technical users.
The FunnelQL editor library can be included like any regular javascript file, is safe to include in concatenation and can be loaded asynchronously.
The editor consists of a mode and lint extension for CodeMirror with a custom WYSIWYG toolbar and application frame.
The editor provides a combination package that includes CodeMirror funnelql-editor+codemirror.js and a extension-only file funnelql-editor.js.
When using the extension-only file you need to manually load lib/codemirror.js and addon/lint/lint.js from the CodeMirror package that can be installed using NPM:
1
npminstall codemirror
Copied!
It is not required to install CodeMirror when using the combination package.
The editor can be loaded using the Javascript constructor FunnelQLEditor with as first parameter a string ID reference or HTML element of a <textarea> and optionally a second parameter with CodeMirror Options.
1
var fql_editor =FunnelQLEditor('funnelql_editor',{
2
/* Optional: CodeMirror options */
3
});
Copied!
To make sure that the FunnelQL library and database are loaded before the editor is instantiated, use the onload callback provided by the Javascript library:
1
$FQL.on('load')
2
.then(function(){
3
4
/* load editor */
5
6
});
Copied!
FunnelQL CodeMirror API extension
The FunnelQLEditor constructor returns a CodeMirror editor object enhanced with additional API methods.
Method
Description
parse
Parse the FunnelQL input and return the parsed JSON via a Promise.