リアルタイム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>
スポンサーリンク