Embed Code Editor | OneCompiler

OneCompiler's Editor can be embedded into 3rd party websites as an iFrame.
You can see a quick demo in action here https://onecompiler.github.io/editor-embed-demo/

Following are the different options available to embed the editor

Embedding default editor

<iframe
 frameBorder="0"
 height="450px"  
 src="https://onecompiler.com/embed/" 
 width="100%"
 ></iframe>

Embedding a specific language

<iframe
 frameBorder="0"
 height="450px"  
 src="https://onecompiler.com/embed/python" 
 width="100%"
 ></iframe>

Embedding a code

<iframe
 frameBorder="0"
 height="450px"  
 src="https://onecompiler.com/embed/javascript/3wyne344h" 
 width="100%"
 ></iframe>

More options via query parameters

Query Parameter	Description
`availableLanguages=true`	To limit the languages in the Language selection popup
`hideLanguageSelection=true`	To hide the language selection button
`hideNew=true`	To hide the 'New' button
`hideRun=true`	To hide the 'Run' button
`hideNewFileOption=true`	Disables new file creation button
`disableCopyPaste=true`	Disables copy/paste functionality
`disableAutoComplete=true`	Disables code auto complete functionality
`hideStdin=true`	To hide the STDIN section
`hideResult=true`	To hide the Result section including STDIN
`hideTitle=true`	To hide the Title/Code ID
`theme=dark`	For Darkmode editor
`fontSize=20`	To set the font size of the editor. Default: 14, Range: 8-32
`listenToEvents=true`	Editor will keep listening for events like code change/ run from parent website
`codeChangeEvent=true`	Editor will send the code change event to the parent website

Capturing the code into parent website

Add the codeChangeEvent=true query param

<iframe 
 frameBorder="0" 
 height="450px"
 src="https://onecompiler.com/embed/python?codeChangeEvent=true"
 width="100%"
></iframe>

In the parent website catch the onmessage events. Following is the sample code to demonstrate

<script>
        window.onmessage = function (e) {
            if (e.data && e.data.language) {
                console.log(e.data)
                // handle the e.data which contains the code object
            }
        };
</script>

Changing the Editor code programmatically

The parent websites can send the code to the Editor with follwong event

var iFrame = document.getElementById('oc-editor'); // add an ID for the <iframe tag
 iFrame.contentWindow.postMessage({
     eventType: 'populateCode',
     language: 'python',
     files: [
      {
        "name": "HelloWorld.py",
        "content": "your code...."
      }
  ]
 }, "*");

Note: Make sure you have enabled listenToEvents flag via query parameter

Run code in editor programmatically

The parent websites can trigger the Run code button programmatically, using the following code

var iFrame = document.getElementById('oc-editor');
iFrame.contentWindow.postMessage({
    eventType: 'triggerRun'
}, "*");

Note: Make sure you have enabled listenToEvents flag via query parameter

Demo

https://onecompiler.github.io/editor-embed-demo/