Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu November 16, 2022 . #blog . #WebTools

Documentation : open embed code from your website in our HTML Editor.

If you've shared any HTML, CSS, or JavaScript code on your website, users of your website can open that code directly in our online HTML editor.

Suppose , you have the following code.

  <h2>This is a heading.</h2>
  <p>This is a paragraph.</p>

And you want the above code to open in our online editor whenever someone clicks a button. Copy the below code and paste it on your website.

You can follow these steps.

  1. First, Add the following code.
    <script src="https://cdn.jsdelivr.net/npm/js-base64@2.5.2/base64.min.js"></script>
  2. Add a textarea element with a unique id and paste your code inside it.
    <textarea id="my-code">
      <h2>This is a heading.</h2>
      <p>This is a paragraph. </p>
    </textarea>
  3. Create a button element with the onclick attribute. So that whenever someone clicks the button we can call a function.
    <button onclick="myFunc()">Open In Editor</button>
    
  4. Now create the function.
    <script>
     function myFunc(){
       let myCode = document.querySelector('#my-code').value;
       let newCode = Base64.encode(myCode);
       window.open('https://www.3schools.in/p/code-editor.html?q='+newCode)
      }
    </script>
save
listen
AI Answer
Write Your Answer
loading
back
View All