Markdown Editor

Published on February 17, 2021, updated on June 01, 2021

Element: <ins-markdown-editor>

Defines a markdown editor.

Complete Example

Code Snippet

<ins-markdown-editor 
  label="Markdown Content"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-markdown-editor>

Error State

Code Snippet

<ins-markdown-editor 
  label="Error Field" 
  has-error 
  error-message="This is a required field">
</ins-markdown-editor>

Read-Only State

Code Snippet

<ins-markdown-editor 
  label="Readonly Field" 
  value="You cannot edit this value" 
  readonly>
</ins-markdown-editor>

Direct Value Set

Code Snippet

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

<script>
  var label = "Change logs - Sample";
  var value = `# H1 heading
## H2 heading
### H3 heading`;

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

Get Markdown Value

Code Snippet

<ins-markdown-editor 
  label="Content" 
  id="myMarkdownEl">
</ins-markdown-editor>

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

<script>
  var button = document.getElementById('getMDBtn');
  var markdownEl = document.getElementById('myMarkdownEl');
  markdownEl.addEventListener('didLoad', function(e) {
    button.addEventListener('click', function() {
      console.log("Markdown field value below:");
      console.log(markdownEl.val());
      alert('check console to see the 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
disabled	boolean	false	true, false	Disables the field
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
required	boolean	false	true, false	Specifies that the input field must be filled out before submitting the form
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content

Events

EVENT	OBJECT	DESCRIPTION
insValueChange	value	Emits the value on change

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.