Store Web Content & Source Codes In The URL – URL Pages

Category: Javascript , Recommended | July 3, 2019
Author: jstrieb
Views Total: 68 views
Official Page: Go to website
Last Update: July 3, 2019
License: MIT

Preview:

Store Web Content & Source Codes In The URL – URL Pages

Description:

URL Pages is a pure JavaScript library for creating an online editor which allows you to store web contents & source codes (HTML, CSS, JavaScript) in the URL so that you can easily share with others.

How to use it:

Download and insert the editor.js into the HTML file.

<script src="editor.js" type="text/javascript"></script>

Create the HTML for the editor.

<div id="textboxes" onkeyup="update()">
  <textarea id="html" placeholder="HTML" rows="9"></textarea>
  <textarea id="css" placeholder="CSS" rows="9"></textarea>
  <textarea id="javascript" placeholder="JavaScript" rows="9"></textarea>
</div>

Initialize the editor.

initialize()

Create an empty anchor link to store the generated URL.

<a id="getLinkLink" href="" target="_blank">Long Link to Publish</a>

Create a button to copy the source codes into the clipboard.

<button onclick="showCopyCodePrompt()">Copy Code</button>

Create a button to download the current web content.

<a id="downloadLink" href="" target="_blank" download="export.html">Download Code</a>

It also allows you to generate a short URL using tinyurl.

<form action="http://tinyurl.com/create.php" method="get" target="_blank">
  <input type="hidden" id="source" name="source" value="indexpage">
  <input type="hidden" name="url" id="url" />
  <button onclick="setCodeUrl()">Short Link to Editor</button>
  <button onclick="setViewUrl()">Short Link to Publish</button>
</form>

You Might Be Interested In:


Leave a Reply