implementation
Prerequisites Coding
javascript monaco
Written: Jun-2023

Implementing a Monaco Editor

Link : https://microsoft.github.io

The Monaco editor is a great tool for sharing editable javascript, css, php, html, etc languages.

Prerequisites

Firstly, the library needs to be included:

html
<script type='text/Javascript' src='https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js'></script>
<link href='https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/editor/editor.main.css' rel='stylesheet'/>

Coding

Now you need the following

html
<div id='put-editor-here'></div>
<textarea class='hidden' id='original-store'>xxxxx</textarea>
<button onClick='doSaveEditorContent()'>Save</button>

js
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
    self.MonacoEnvironment = {
        baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
    };
    importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript|css|html|....' }));

var _editor;
require(['vs/editor/editor.main'], function () {
    _editor = monaco.editor.create(document.getElementById('put-editor-here'), {
        value: document.getElementById('original-store').value,
        language: 'javascript|css|html|...',
        theme: 'vs',
        automaticLayout: true,
        scrollbar: {
              vertical: 'visible',
              horizontal: 'visible'
        },
        fontSize: '12px'
    });

    
    _editor.addListener('didType', () => {
        document.getElementById('original-store').value=_editor.getValue();
    }); 
    
});

js
function doSaveEditorContent() {
    document.getElementById('original-for-post').value=_editor.getValue();
    console.log('Saved');
}

square