-
Notifications
You must be signed in to change notification settings - Fork 1.1k
HowTo: Import Libraries to use ACE with Font Awesome in JSON Editor
Engelbert Niehaus edited this page Jun 24, 2017
·
4 revisions
Very often, when JSON data contains larger text elements, the text is edited with specialized editors (like ACE). Especially when you want to use the JSON editor offline and use ACE without internet connectivity, the required editor ACE, font-awesome and JQuery had to be available on your device as well. This page provides an example to achieve integrate the ACE editor with JSON Editor. All you have to do is:
- assume your JSON editor is installed in json_editor/
- download Font Awesome
- unzip folder an store in folder of you JSON editor, e.g. json_editor/font-awesome-4.7.0/
- download ACE Editor
- unzip zip-file and copy subdirectory lib/ace into you JSON editor folder as json_editor/ace/
- embed the libraries and CSS into the header.
- Download JQuery and uncompress JQuery in the subdirectory of your JSON editor.
- Create a JSON Schema for a JSON with json2schema.html
Example Header:
<head>
<meta charset="utf-8" />
<title>JSON Editor for ACE</title>
<!-- JQuery CSS -->
<link href="../jquery/jquery-ui.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font-Awesome CSS -->
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
// Set the default CSS theme and icon library globally
JSONEditor.defaults.theme = 'bootstrap3';
JSONEditor.defaults.iconlib = 'fontawesome4';
JSONEditor.plugins.ace.theme = 'xcode';
</script>
</head>
....At the end of the JSON editor import JQuery assuming that you downloaded JQuery and stored the uncompressed ZIP in the subdirectory json_editor/jquery/
....
<script src="jquery/external/jquery/jquery.js" type="text/javascript"></script>
</body>
</html>