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.
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|
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.
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
Update your App's settings once the files have been set.