Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset=utf-8 />
  <link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>
</head>
<body>
  
<div>
  <div class="copy">
    <h2>Copy this ...</h2>
    <img src="http://www.cupcakeipsum.com/assets/green_muffin.png">
    <article>
      Pie applicake sugar plum candy canes fruitcake chocolate cake halvah. Gummi bears oat cake chocolate cake. Dessert sweet marzipan. Macaroon ice cream fruitcake pudding oat cake gummi bears gummies. Gummi bears tootsie roll.
    </article>
  </div>
  <div contenteditable="true" class="plaintext">&nbsp;</div>
  <div contenteditable="true" class="allow">&nbsp;</div>
</div>
  
  
  
  
  
</body>
</html>
​
 
body {
  background:#4679BD;
  font-family: 'Arial', cursive;
  font-weight:400;
}
body > div {
  padding:50px;
}
body > div > .copy {
  color:#000;
  display:block;
  padding-bottom:20px;
  min-height:150px;
  border-color: #000;
}
div > .copy > img {
  width:100px;
  float:left;
  padding-right:20px;
}
div > [contenteditable] {
    position:relative;
    width:40%;
    display:inline-block;
    padding:20px 5px;
    background:#fff;
    min-height:200px;
    border:1px solid #1d3049;
    outline:none;
    font-size:13px;
  color:#000!important;
}
div > .plaintext[contenteditable] {
  float:left;
}
div > .allow[contenteditable] {
  float:right;
}
div > .plaintext[contenteditable]:before, div > .allow[contenteditable]:before {
  position:absolute;
  background:#000;
  padding:1px 5px;
  color:#fff;
  font-size:11px;
  border-radius:0 0 3px 0;
  left:0;
  top:0;
}
​
div > .plaintext[contenteditable]:before {
  content:'PlainText';
}
​
div > .allow[contenteditable]:before {
  content:'HTML';
}
 
​
function convertToPlaintext() {
  var textContent = this.textContent;
  this.textContent = textContent;
}
​
var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]');
​
[].forEach.call(contentEditableNodes, function(div) {
  div.addEventListener("input", convertToPlaintext, false);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers