innerHTMLを利用してリアルタイムHTMLエディタを作ってみましょう。
たいしたことはしていないわりに、見た目のおかげで、知らない人からはなんだかすごいことをしているように見られるという効果もあります。
とりあえず簡単にhtmlから
wisiwig.html
|
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
<link rel=stylesheet type="text/css" href="./wisiwig.css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./wisiwig.js"></script>
<title>WISIWIGなエディタ</title>
<script type="text/javascript">
<!--
function openFile(){
//WISIWIGエディタ
wisiwigEdit();
//1秒毎に実行
window.setTimeout("openFile();",1000);
}
-->
</script>
</head>
<body onload="openFile()">
<div id="inclementWatch"></div>
<h2>WISIWIGなエディタ</h2><br />
<form>
<textarea rows="10" cols="100" id="inputField"></textarea>
<br /><hr />
<div id="printField" style="display:none;"></div>
</form>
</body>
</html>
|
2箇所にIDを指定しているだけでそれ以外は特に何もありません。
JavaScript的には毎秒openFile()を実行します。
というわけで肝心のwisiwigEdit()を書いてしまいましょう。
wisiwig.js
|
/*==========================================================*/
//グローバル変数定義
var inputFieldOldValue="";
/*==========================================================*/
//メインルーチン
/*----------------------------------------------------------*/
/* WISIWIGエディタ作成 */
function wisiwigEdit(){
//HTML入力部分取得
var inputField = document.getElementById("inputField");
//結果表示部分取得
var printField = document.getElementById('printField');
//検索文字列が空なら何も出力しない
if (inputField.value==""){
printField.style.display = "none";
//検索文字が更新されたら
} else if (inputField.value!=inputFieldOldValue) {
//改行コードを<br />に変換
var aaa=inputField.value.replace(/\r\n|\r|\n/g,"<br />");
//一部タグを削除するサブルーチン
aaa=subKillTag(aaa);
//画面表示
printField.style.display = "block";
printField.innerHTML=aaa;
}
//古い内容を保存しておく
inputFieldOldValue=inputField.value;
}
/*==========================================================*/
//サブルーチン
/*----------------------------------------------------------*/
/* 一部のタグを殺すサブルーチン */
function subKillTag(text){
//<script>タグ
text=text.replace(/<(.*script.*)>/ig,"<$1>")
/* 他にも殺したいものがあればここに記入 */
//返却
return text;
}
|
inputFieldが入力する部分、printFieldが表示する部分です。
inputFieldの値が変更されたら、printFieldにその値を表示します。
そのときにその値をinputFieldOldValueに保存しておきます。
次回inputFieldと比較して、変更されているかどうかをチェックします。
毎回過去のデータと比較しているのは単に負荷軽減のためです。
面倒ならinputFieldOldValueの部分は一切無視して実装しても特に問題はありません。
特にどこと通信しているわけでも入力値を使用しているないのでセキュリティ特に問題はなく、危険が及ぶにしても自分のブラウザだけなのですが、念のために<script>タグは無効にしておきます。
もっとも、それでも
<img src="javascript:alert('hello');">
<BR style=left:expression(eval('document.location="http://www.google.co.jp/";'))>
などと書かれたら反応してしまいますが。
これでひとまず完成です。
http://yuubiseiharukana.creativeroot.jp/js2/js2-2-1.html
何か文字を入力するだけでリアルタイムに表示が変更されるので、知らない人に作ってあげるとそこはかとなく尊敬されるかもしれません。
wisiwig.css
/*----------------------------------------------------------*/
/* 結果表示 */
#printField{
width:80%;
margin-right:10%;
margin-left:10%;
border:1px solid #aaa;
padding:5px;
}
/*----------------------------------------------------------*/
/* 入力テキストエリア */
#inputField{
background-color:#efe;
} |
PR
