WYSIWYG Editor
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.
FunnelQL Editor
Online Editor
Installation
1
npm install funnelql-editor
Copied!
Including the editor
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
npm install codemirror
Copied!
It is not required to install CodeMirror when using the combination package.
FunnelQL editor + codemirror combined
1
<link rel="stylesheet" href="css/funnelql-editor+codemirror.css" />
2
<script src="js/funnelql-editor+codemirror.js" async></script>
Copied!
FunnelQL editor extension only
If CodeMirror is already present on a page you can include just the FunnelQL extension-only files.
1
<!-- Optional: from CodeMirror package -->
2
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css" />
3
<link rel="stylesheet" href="node_modules/codemirror/addon/lint/lint.css" />
4
<script src="node_modules/lib/codemirror.js"></script>
5
<script src="node_modules/addon/lint/lint.js"></script>
6
7
<!-- Required: FunnelQL editor extension -->
8
<link rel="stylesheet" href="css/funnelql-editor.css" />
9
<script src="js/funnelql-editor.js" async></script>
Copied!
Setup
The editor can be installed on any
<textarea>. The FunnelQL Javascript library should be loaded before a FunnelQL editor is instantiated.1
<textarea type="text" id="funnelql_editor" style="width:100%;height:250px;"></textarea>
Copied!
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
parseParse the FunnelQL input and return the parsed JSON via a Promise.
Last modified 3yr ago