Embed Code Editors

Contents

Overview

This article introduces how to embed the Ace.js editor (External link) into records of a Kintone App.

Ace.js

Ace.js is an embeddable code editor for web pages. It matches features of other popular code editors (such as Sublime Text), and can be easily customized based on preference.

Sample Image

Code Editing

The Ace editor is displayed in the Record Create and Edit page. When the user navigates to the Record Details page, a read-only version of the Ace editor is displayed. The user can re-edit the code by navigating to the Record Edit page.

Syntax Errors

Codes that do not follow the specified syntax will be noted as errors inside the Ace.js code editor.

Prepare the App

Create the form

Create an App (External link) with the following fields.

Field Type Field Code / Element ID Field Name
Text Area code Code
Blank space editor --

The form should look like the following screenshot.

Set the library

This example uses Ace.js (External link) v1.3.3. Set the following URL into the Upload JavaScript for PC option of the App's JavaScript and CSS Customization settings (External link) .

  • https://js.kintone.com/ace/v1.3.3/ace.js

Sample Code

Set the JavaScript file

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link) .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

(function() {
  'use strict';
  var editor;

  // define a function that will display the ace editor on any page:
  function showEditor() {
    kintone.app.record.setFieldShown('code', false);
    var editor_id = kintone.app.record.getSpaceElement('editor').id;
    editor = ace.edit(editor_id);
    editor.$blockScrolling = Infinity;
    editor.setOptions({
      theme: 'ace/theme/monokai',
      mode: 'ace/mode/javascript',
      maxLines: 30,
      minLines: 30,
      wrap: true
    });

    return editor;
  }

  // On the details page, display the editor with [uneditable] code and remove the cursor shown in the editor
  var recordDisplayEvents = 'app.record.detail.show';

  kintone.events.on(recordDisplayEvents, function(event) {
    editor = showEditor();
    editor.setValue(event.record.code.value, -1);
    // Set the editor to "read only" mode
    editor.setReadOnly(true);

    // Remove the cursor
    var cursor = document.getElementsByClassName('ace_cursor')[0];
    cursor.parentNode.removeChild(cursor);
    return event;
  });

  // When creating/editing the record, display the editor with code:
  var recordEditEvents = ['app.record.create.show', 'app.record.edit.show'];

  kintone.events.on(recordEditEvents, function(event) {
    editor = showEditor();
    if (event.type === 'app.record.edit.show') {
      editor.setValue(event.record.code.value, -1);
      editor.setReadOnly(false);
    }
    return event;
  });

  // When saving the record, save the contents of the editor into the text area field
  var recordSaveEvents = ['app.record.create.submit', 'app.record.edit.submit'];

  kintone.events.on(recordSaveEvents, function(event) {
    event.record.code.value = editor.getValue();
    return event;
  });
})();

Set the CSS file

Prepare the following CSS in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload CSS for PC option of the JavaScript and CSS Customization settings (External link) .

1
2
3
4

.ace_editor {
  z-index: 0;
  width: 800px;
}
caution
Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the Ace.js library is uploaded before the JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

Update the Settings

The files set in the JavaScript and CSS Customization settings (External link) should look like the following.

Click Save, and then on Update App. Create a new record to view the embedded code editor.

Code Explanation

When the record create or record edit event is triggered, the Text Area field is hidden, and the Ace editor is displayed on the Blank Space field. When the record is saved, the contents inside the Ace editor are saved into the Text Area field. This data in the Text Area field is later used to populate the contents of the Ace editor when the record edit event is triggered. When the record details event is triggered, the Text Area field is hidden again, and a "read-only" version of the Ace editor is displayed on the Blank space field.

Reference