人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: zero4
●カテゴリ:インターネット ウェブ制作
✍キーワード:はてなダイアリー インターフェース エリア サイズ サイト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● llusall
●35ポイント

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

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を開いてください。

◎質問者からの返答

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

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

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


2 ● 186
●35ポイント

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)">

と直せば良いです.

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ