WYSIWYG Editor

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

Element: <ins-editor>

Defines a WYSIWYG editor. This component requires jQuery library.

Code Snippet

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous">
</script>

Complete Example

Code Snippet

<ins-editor 
  label="Editor Content" 
  has-code-editor
  tooltip="This is a sample tooltip content. It also support html content.">
</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="/assets/json/editor-image.json">
</ins-editor>

<p>Sample used for <code>images</code>: <br/> <a target="_blank" href="/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
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.