Code Editor

  • CodeEditor wraps Monaco Editor as a web component.
  • Supports JS/JSON/HTML languages, read-only mode, line numbers, minimap, and dark/light theme.
  • Emits change when content is edited and updates value from property changes.
Overview API

Usage

Disable editor 


  
    <wc-code-editor id="business-rule-editor" style="display:block; height: 300px"></wc-code-editor>
    <script>
      document.getElementById('business-rule-editor').value = `/**
* Sample Code
*/
function myBusinessRuleFunction(){
  const a = 1;
  const b = 2;
  let c = a + b;
  console.log(c);
}`;

      document.querySelector('#disableEditor').addEventListener('change', function(evt) {
        document.getElementById('business-rule-editor').disabled = evt.target.value;
      });
    </script>

On this page

  • Usage
Sponsor

Properties

Events

Methods

CSS Custom Properties