Embed Code Editors

Introduction

This article shows how to embed the Ace.js editor into a Kintone record, so that the user's typed text can be displayed as code. This article will configure the editor to specifically use JavaScript syntax.

What is Ace.js?

Ace 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.

 

Details of the Customization

On the Record create/edit page, the Ace editor is displayed where the user can type directly into.
When the record is saved, a "read-only" version of the Ace editor is displayed on the Record details page.
The user can re-edit the code by accessing the Record edit page.

 

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

syntax_error.png

 

How to Apply the Customization

Prepare a Kintone App

Prepare a Kintone App that contains the following two fields:

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

 

The "Text Area" field will be hidden when the Record create/edit/details pages are displayed, but is necessary to store the code that is written in the Ace editor.

 

image-1.png

Prepare 2 JavaScript files

The Ace Library

Use the Ace library CDN link hosted on the Kintone CDN.

The Main code

The main code utilizes the Ace methods to embed the Ace editor with different configurations depending on what Kintone events were triggered.

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.

Prepare a CSS file

The CSS file is used to brush up the look of the Ace editor in Kintone.

Set your files in your App

Access your App's settings page, and set these files in the JavaScript and CSS Customization page.

Screenshot of the JavaScript and CSS Customization settings


Update your App's settings once the files have been set.

Finally

The code in this tutorial is largely based off the Embedding Guide from the Ace website, but modified to be compatible with Kintone. The website contains more detailed guides on customizing the editor. For example, to change the syntax language, you can rewrite "session.setMode("ace/mode/javascript")" to include the code syntax of your choice.

Was this article helpful?
0 out of 0 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!