'searching for a simple contenteditable where pasting url address is clickable

I'm trying to create a simple blog page using contenteditable. My problem is whenever I paste url addresses the urls come out as plain text. Is there a way to convert url addresses pasted to be clickable links without losing the formatting or images pasted? I just need non-image links to work (ex: "https:\google.com" converted to "") and after saving the page, the next time i open that page the links work?

Here's my blog template.

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title> </title>
      <style>
      @import url('https://fonts.googleapis.com/css2?family=Literata:wght@400&family=Merriweather:wght@400&display=swap');
          body {
            font-size: 130%;
            font-family: Literata, monospace;
            padding: 20px;
            line-height: 1.7em;
          }
          #blog {
            width:45%;
            margin-top:20px;
            margin-left:auto;
            margin-right:auto;
            border-style: none;

          }        
          img {
            width: 80%;
            height: auto;
            }
          
           [contenteditable] {
            outline: 0px solid transparent;
        }
      @media only screen and (max-width: 700px) {
        #blog {
                width: 100%;
                padding: 2%;
                font-size: 120%;
            } 
          img {width:100%;
          height:auto;
          }
      @media print {
            #blog {
                width: 100%;
                margin: 0.5cm;
                padding:5px;
            }
      </style>
  </head>
  <body>
  <script>
   window.onbeforeunload = function(){ return 'have you saved your work?';};
   </script>
  <script>
            document.addEventListener('DOMContentLoaded', function () {
                const ele = document.getElementById('blog');

                // Get the placeholder attribute
                const placeholder = ele.getAttribute('data-placeholder');

                // Set the placeholder as initial content if it's empty
                ele.innerHTML === '' && (ele.innerHTML = placeholder);

                ele.addEventListener('focus', function (e) {
                    const value = e.target.innerHTML;
                    value === placeholder && (e.target.innerHTML = '');
                });

                ele.addEventListener('blur', function (e) {
                    const value = e.target.innerHTML;
                    value === '' && (e.target.innerHTML = placeholder);
                });
            });
        
    </script>
<div class="write-area" id="blog"  spellcheck="false" contenteditable="true" data-placeholder="...start typing here ... save as an html file (ctrl+s) "></div>


</body></html>

sample of how it looks like -- it would be nice if i can get the url links (except for image links) to work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'searching for a simple contenteditable where pasting url address is clickable

Sources

Related Questions