How to create online HTML editor in blogger

0 Yogendra Patel 1:32 PM

how to apply HTML editor Online code in blogger:-

Login into blogger and create a new post then copy HTML, Script and CSS code given below 👇 and paste this in your blog post.

HTML Code

 
    
<!------Html Code------>
<div class="HTML-Editer-Title">HTML Editer</div>
<textarea rows="20"></textarea> 
<div class="HTML-Editer">
<button onclick="updateIframe()" type="button">Run Code</button>
</div>
<iframe id="runCode"></iframe>

script Code

<!----JavaScript---->

<script>
function updateIframe(){
var runCode = $("#runCode").contents().find('body');
   
var textareaValue = $("textarea").val();

runCode.html(textareaValue);
 }
  </script>

CSS Code

  <!----CSS Style---->

<style>
  
.HTML-Editer-Title {
  margin: 10px 0; 
  width: 100px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}  
  
.HTML-Editer {
  text-align: right;
}

.HTML-Editer button {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
  
textarea {
  display: block;
  margin: 10px 0; 
  width:100%; 
  border-radius: 10px;
  border: 1px solid #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
 
iframe {
  display: block;
  margin: 10px 0; 
  width:100%; 
  height: 350px;
  resize:both; 
  overflow: auto; 
  border-radius: 10px;
  border: 1px solid #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
  
</style>