Insites Docs Web Components V1Data EntryWYSIWYG Editor

WYSIWYG Editor

Last updated on August 02, 2024.

Element: <ins-editor>

Defines a WYSIWYG editor. This component requires jQuery library.

Complete Example

Code Snippet

<ins-editor label="Editor Content" has-code-editor></ins-editor>
Error State

Code Snippet

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

Code Snippet

<ins-markdown-editor label="Readonly Field" disable-line-numbers value="You cannot edit this value" readonly></ins-markdown-editor>
Direct Value Set

Code Snippet

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

  var field = document.getElementById('directFieldEl');
  field.label = label;
  field.value = value;
</script>
Get WYSIWYG Editor Value

Code Snippet

<ins-editor label="Content" id="myEditorEl" has-code-editor></ins-editor>
<ins-button solid label="Get Value" id="getValueBtn"></ins-button>
<script>
  var button = document.getElementById('getValueBtn');
  var editorEl = document.getElementById('myEditorEl');
  editorEl.addEventListener('didLoad', function(e){
    button.addEventListener('click', function() {
      console.log("Editor field value below:");
      console.log(editorEl.val());
      alert('check console to see the value');
    });
  });
</script>
Enable Images

Sample used for images:
/assets/json/editor-image.json

Code Snippet

<ins-editor label="Content" image-upload id="imagesEditorEl" images="/v1/assets/json/editor-image.json"></ins-editor>
<p>Sample used for <code>images</code>: <br/> <a target="_blank" href="/v1/assets/json/editor-image.json">/assets/json/editor-image.json</a></p>
<script>
  var imagesEditorEl = document.getElementById('imagesEditorEl');

  imagesEditorEl.addEventListener('onupload', testFileUpload);

  function testFileUpload(event) {
    var image = event.detail.image;
    var upload = event.detail.upload;

    upload.complete({
      "file": {
        "url": image.name,
        "id": image.name
      }
    });
  }
</script>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
has-code-editor boolean false true, false Enables the code editor view
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)
image-upload boolean false true, false Enables image upload feature of editor
images string "" any Enables image selection feature of editor
class-id string random (auto-generated) any Unique identifier of editor
show-source boolean false true, false Code editor view by default on component initialization

 

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.