Insites Docs Web Components V1Data EntryCode Editor

Code Editor

Last updated on August 02, 2024.

Element: <ins-code-editor>

Defines a code editor.

Complete Example

Code Snippet

<ins-code-editor label="Code Editor"></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>
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>
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>
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
mode string htmlmixed css, htmlembedded, htmlmixed, javascript, markdown, python, vue, xml, yaml Language mode of code editor (Syntax highlighting)

 

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.