Code Editor

Published on February 17, 2021, updated on August 22, 2022

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>

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

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.