Embed Code Editors
This article introduces how to embed the Ace.js editor into records of a Kintone App.
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.
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.
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 with the following fields.
|Field Code / Element ID
The form should look like the following screenshot.
Set the library
Set the CSS file
Update the Settings
Click Save, and then on Update App. Create a new record to view the embedded code editor.
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.