Embed Ace Editor into Survey Creator

Ace is a lightweight, extensible code editor that supports search, syntax highlighting, code folding, UI theming, and more. These features are provided through extensions, so you can easily add missing functionality when needed. Survey Creator allows you to use Ace for editing the survey JSON schema in the JSON Editor tab.

Depending on your setup, you can either install Ace as an npm package or include it from a CDN.

In modular applications, install the ace-builds npm package and import Ace along with any required extensions in the component that renders Survey Creator. For instance, the following code imports the extensions that enable the Find/Replace dialog in Ace and add support for the dark theme:

npm install ace-builds --save

// A component that renders Survey Creator
// ...
import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/ext-searchbox";
import "ace-builds/src-noconflict/theme-clouds_midnight";
// ...

In classic script applications, add Ace and its extensions directly to your HTML page. The following code includes the same extensions and theme:

<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>

To enable code highlighting, set the path to the directory containing the ace.js script using the AceJsonEditorModel.aceBasePath property. If you host ace.js on your server, specify your server path. If you use a CDN or installed Ace via npm, you can use the following path:

// Modular applications
import { AceJsonEditorModel } from "survey-creator-core";
AceJsonEditorModel.aceBasePath = "https://unpkg.com/ace-builds/src-min-noconflict/";

// Classic script applications
SurveyCreatorCore.AceJsonEditorModel.aceBasePath = "https://unpkg.com/ace-builds/src-min-noconflict/";