Home Components Colors Typography Blog Blocks
Peacock Home Components Colors Typography Blog Blocks Direction Theme

Code Editor

A Monaco-based code editing component with syntax highlighting and theming.

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

Code Editor

Sponsor