HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

リアルタイムHTMLエディタ

HTMLエディタをブラウザで作ろうとおもうと、どうしてもほしくなるのがリアルタイムプレビュー。
どう書けばいいか?

改行処理部は、単純に br を入れてるだけなので本チャンでは工夫が必要になる。
もっとも、べたのHTMLをかけば・・・ってことならテキスト内にユーザーが br を
入れるべきってことになるので、あまりかんがえずに javascript で リプレースかけずに投げ込めば済む。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>プレビュー</title>
<body>
----- このスクリプトで入力された内容を入れ替える -----
<script>
function ModyStyle()
{
    document.getElementById("style").innerHTML = '<style>'+document.getElementById("styleBOX").value+'</style>';
}
function ModyBody()
{
    var buff;
    buff = document.getElementById("bodyBOX").value;
    // 1行ごとに改行を入れている(プレーンのHTMLを入力させるということなら
    // document.getElementById("htmlbody").innerHTML = buff;
    // でOK
    document.getElementById("htmlbody").innerHTML = buff.replace( /\n/g , "<br />\n" ) ;
}
</script>
--------------------------------------------------
<div id="style">
</div>
<br />
----- 入力欄 -------------------------------------
<form>
<div class="titlebox titleboxS">
<textarea OnChange="ModyStyle();" OnKeyUp="ModyStyle();"id="styleBOX" cols="80" rows="8">
#htmlbody{
font-size:12px;
}
</textarea>
</div>
<div class="titlebox titleboxB">
<textarea OnChange="ModyBody();" OnKeyUp="ModyBody();"id="bodyBOX" cols="80" rows="8">
<strong>TEST</strong>
リアルタイムHTML
ここにデータを書き込むと
HTMLBODY にデータ内容が表示されるよ。

スタイルは、上の STYLE で指定できるよ。

</textarea>
</div>
</form>
--------------------------------------------------

----- 全体のデザイン用 style ----------------------
<style>
.titlebox {
border: 1px solid #0A77B7;
border-radius: 4px;
margin: 0.5em 0;
padding: 0.5em;
position: relative;
}
.titleboxhtmlbody {
border: 1px solid #333333;
border-radius: 4px;
margin: 0.5em 0;
padding: 0.5em;
position: relative;
}
.titleboxS::before {
background-color: #fff;
color: #0A77B7;
content: "STYLE";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
.titleboxB::before {
background-color: #fff;
color: #0A77B7;
content: "BODY";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
.titleboxHTMLBODY::before {
background-color: #fff;
color: #0A77B7;
content: "HTMLBODY";
font-weight: bold;
left: 1em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
</style>
--------------------------------------------------

----- 表示エリア ----------------------------------
<div id="htmlbody" class="titleboxhtmlbody titleboxHTMLBODY">
<strong>TEST</strong><br />
リアルタイムHTML<br />
ここにデータを書き込むと<br />
HTMLBODY にデータ内容が表示されるよ。<br />
<br />
スタイルは、上の STYLE で指定できるよ。<br />
<br />
</div>
--------------------------------------------------
</body>
</html>

スポンサーリンク

スポンサーリンク

カテゴリー