Insites Docs Web Components V2Data EntryCode Editor

Code Editor

Last updated on January 06, 2025.

Element: <ins-code-editor>

Defines a code editor.

Complete Example

Code Snippet

<ins-code-editor 
  label="Code Editor"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-code-editor>
Description Example

Code Snippet

<ins-code-editor 
    label="Description Example"
    html-description
    description="This is a <strong>Description</strong> <i>Example</i>">
</ins-code-editor>
Error State

Code Snippet

<ins-code-editor 
  label="Error Field" 
  has-error 
  error-message="This is a required field">
</ins-code-editor>
Read-Only State

Code Snippet

<ins-code-editor 
  label="Readonly Field" 
  value="<!-- You cannot edit this value --> <p>Readonly state and line numbers disabled</p>" 
  readonly disable-line-numbers>
</ins-code-editor>
Theme

Code Snippet

<ins-code-editor 
  label="Code Editor" 
  theme="twilight" 
  value="<p>Theme: twilight</p>">
</ins-code-editor>
Direct Value Set

Code Snippet

<ins-code-editor 
  id="directFieldEl">
</ins-code-editor>

<script>
  var label = "Change logs - Sample";
  var value = `<html>
  <body>
    <h1>Sample code</h1>
  </body>
</html>`;

  var directFieldEl = document.getElementById('directFieldEl');
  directFieldEl.addEventListener('didLoad', function (e){
    directFieldEl.label = label;
    directFieldEl.setValue(value);
  });
</script>
Get Code Editor Value

Code Snippet

<ins-code-editor 
  label="Content" 
  id="myCodeEditorEl"
  value="<h1>Hello World!</h1>">
</ins-code-editor>

<ins-button 
  solid label="Get Value" 
  id="getValueBtn">
</ins-button>

<script>
  var button = document.getElementById('getValueBtn');
  var myCodeEditorEl = document.getElementById('myCodeEditorEl');
  myCodeEditorEl.addEventListener('didLoad', function (e){
    button.addEventListener('click', function() {
      console.log("Code Editor field value below:");
      console.log(myCodeEditorEl.val());
      alert('check console to see the value');
    });
  });
</script>
Language Mode

Code Snippet

<ins-code-editor 
  id="codeEditorModeEl" 
  mode="javascript">
</ins-code-editor>

<script>
  var label = "Change logs - Sample";
  var value = `function sample(value) {
    return value;
  }

  sample("test");

  var field = document.getElementById('codeEditorModeEl');
  field.addEventListener('didLoad', function(e) {
    field.label = label;
    field.setValue(value);
  });
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Label shown for the field
value string "" any Defines the field value
name string "" any Defines the field name
readonly boolean false true, false Make the field readonly
has-error boolean false true, false Defines if the field is invalid / error
error-message string "" any Message shown when field has error
theme string "" default, monokai, neat, the-matrix, material Theme color of code editor
disable-line-numbers boolean false true, false Hide code editor line numbers
auto-height boolean false true, false Height adjusts based on the code editor content
mode string htmlmixed css, htmlembedded, htmlmixed, liquid, javascript, markdown, python, vue, xml, yaml Language mode of code editor (Syntax highlighting)
tooltip string "" - Displays a tooltip beside the label. Supports HTML Content
html-description boolean false true, false Enables HTML tags in the description
description string "" any Defines the description value

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.