はじめに
contenteditableを使ってhtmlおよびcssを試せる場所を作ってみました
使用言語
HTML5 / CSS / javaScript( jQuery )
ブラウザ
Google Chrome バージョン42
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="wrapper">
<p id="about">
枠線青色のエリアでhtmlを記述することができます。<br/>
枠線赤色のエリアでcssを記述することができます。<br/>
</p>
<main id="preview"></main>
<code id="tag-edit" contenteditable="plaintext-only"></code>
<div class="clear" id="tag-clear">Tag Clear</div>
<style id="style-edit" contenteditable="plaintext-only"></style>
<div class="clear" id="style-clear">Style Clear</div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
//タグクリアボタン
$('#tag-clear').on('click',function(){
$('#tag-edit').text('');
$('#preview').empty();
});
//スタイルクリアボタン
$('#style-clear').on('click',function(){
$('#style-edit').text('');
});
//previewにタグ追加する
$('code').on('keydown',function() {
var texthtml = $('code').text();
$('#preview').html(texthtml);
});
</script>
</body>
</html>
contenteditable
要素を直接編集できるようになります。
CSS
index.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 1.3s;
}
html,body{
height: 100%;
}
#wrapper{
margin: 1em;
height: 100%;
}
#about{
border-bottom: solid 1px #000;
}
main{
min-height: 50%;
}
code{
display: block;
border: 2px solid blue;
height: 10%;
overflow-y: scroll;
white-space: pre;
outline: none;
font-size: 1.5em;
padding: 0 0.2em;
}
code+.clear{
font-size: 1.2em;
color: #6BBED5;
}
style{
display: block;
outline: none;
border: 2px solid red;
white-space: pre;
height: 30%;
overflow-y: scroll;
padding: 0 0.2em;
}
.clear{
display: inline-block;
font-size: 1.5em;
color: #D45D87;
}
white-space: pre
スペースや改行文字をそのまま表示する
preタグのCSS版です。