はてなダイアリーの一部の機能(太字、文字サイズ等を変更)を真似したいです


はてなダイアリーの「テキストボックス」に文章を書いて、
そこをマウスで選択して(青くして)「B」ボタンを押すと、
テキストエリアに「<span style="font-weight:bold;"></span>」と表示されますが、
これはどのように実現できるのでしょうか?
参考になりそうなサイト等をお教え下さい。よろしくお願いします。

はてなダイアリーと全く同じようなインターフェース ではなく。 シンプルで簡単なものを作りたいです。

回答の条件
  • 1人10回まで
  • 登録:2006/09/26 16:52:08
  • 終了:2006/10/03 16:55:03

回答(2件)

id:llusall No.1

llusall回答回数505ベストアンサー獲得回数612006/09/26 18:03:25

ポイント35pt

はてなダイアリーを参考にしてみました。

1.以下をダウンロード

http://d.hatena.ne.jp/js/prototype-1.4.0.js

http://d.hatena.ne.jp/js/textinput_selection.js


2.以下の内容をhoge.html等に保存

<html>

<head>

<title></title>

<script type="text/javascript" src="prototype-1.4.0.js"></script>

<script type="text/javascript" src="textinput_selection.js"></script>

<script Language="JavaScript">

// 以下、diary_edit.js より抜粋

function addSpanProperty(text, newPropName, newPropValue, deleteIfIncluded) {

    var newStyle = "";

    if (text.match(/<span style="(.*)">([^<>]*)<\/span>/)) {

    var style = RegExp.$1;

    text = RegExp.$2;

    if ( style.match(new RegExp(newPropName+":([^;]*);")) ) {

        var p = RegExp.$1;

        var i = style.indexOf(p);

        if (deleteIfIncluded) {

        var r = new RegExp(newPropName+":[^;]*;");

        newStyle = style.replace(r, "");

        } else {

        newStyle = style.substring(0, i) + newPropValue + style.substr(i+p.length);

        }

    } else {

        newStyle = style + newPropName+":"+newPropValue+";";

    }

    } else {

    newStyle = newPropName+":"+newPropValue+";";

    }

    

    if (newStyle=="")

    return text;

    else

    return '<span style="'+newStyle+'">' + text + '</span>';

}

function markupBold() {

    var textSelection = new TextInputSelection(document.edit.body);

    var text = textSelection.getText();

    textSelection.setText(addSpanProperty(text, "font-weight", "bold", true));

    textSelection.select();

}

</script>

</head>

<body bgcolor="white">

<form name="edit">

<textarea name="body" tabindex="5" id="textarea-edit" rows="15" cols="70"></textarea>

<input type="button" value="Bold" onClick="markupBold();">

</form>

</body>

</html>


3.以上のファイルを同一フォルダに配置して、htmlを開いてください。

id:zero4

あ!ありがとうございます。

教えて頂いたとおりしたら、できました。

難しそうですが、これから中身を理解したいと思います。

2006/09/26 18:18:48
id:smoking186 No.2

186回答回数74ベストアンサー獲得回数62006/09/26 18:21:19

ポイント35pt

1から自分で作りたいのか, それともありものを使って作りたいのか分かりませんが.

昔, ありものを改造したので, 後者を想定して割とシンプルなものを紹介します.

配布元・改造版ともにキーボードショートカットも付いてます.

使い方はhtmlとjsを見てください.

ボタンの押下感が要らない場合は,

<img class="buttons" onmouseover="mouseover(this);" onmouseout="mouseout(this);" 
onmousedown="mousedown(this);" onmouseup="mouseup(this);" 
onclick="wrapSelectionWithPre(thisForm.body);" src="pre.gif" width="32" height="16" align="middle" alt="pre"
title="click to add a pre to the selected text (or type control-shift-x)">

とあるところを,

<img class="buttons"
onclick="wrapSelectionWithPre(thisForm.body);" src="pre.gif" width="32" height="16" align="middle" alt="pre"
title="click to add a pre to the selected text (or type control-shift-x)">

と直せば良いです.

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません