重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

TEXTAREAにワードパッド風の簡易編集機能

解決済

  • 質問者：Koji001
  • 質問日時：
  • 回答数：3件

時折見かけることがあるのですが、
掲示板などの投稿画面で、
TEXTAREAのフィールドにWindowsのワードパッド風の編集機能がついているものがあります。
見出し、文字の大きさやリンク、画像挿入やリストが挿入できるようなメニューが、入力エリア上部に付属しているようなものです。

この作成の仕方がよくわりません。
JavaScriptで実現しているのはなんとなくわかるのですが、情報の入手先がわかりません。

参考になるサイトや書籍の情報だけでも構いませんので、どなたかご存知の方がいらっしゃいましたら教えていただけませんでしょうか。
よろしくお願い申し上げます。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

完全にその機能だけ組み込みになりますが、オープンソース等のWEBエディターなら、下記のサイトが参考になると思います。


http://www.geniisoft.com/showcase.nsf/WebEditors

> 何かフリーのJavaScriptライブラリなどをご存知でしたら教えていただけませんでしょうか。
簡単なものなら、js_quicktags.jsがあります。これなら、textareaならどこでも簡単に導入できます。
http://www.alexking.org/index.php?content=softwa …

参考URL：http://www.alexking.org/index.php?content=softwa …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
英語が苦手な私にはなんとも難解ですが、
私が欲しかった情報です。
なんとか自力で組み込んでみようと思います。
ありがとうございました。

通報する
お礼日時：2006/09/30 11:33

No.2

  • 回答者： taloo
  • 回答日時：

> 何かフリーのJavaScriptライブラリなどをご存知でしたら教えていただけませんでしょうか。


「javascript html editor」などで検索してみてはいかがでしょうか。

MovableType専用（またはプラグイン）などのように、特定のCMSに特化した物もありますが、
デザインは勿論、BBSやメールフォームへの組み込みも可能なように作られている物などいろいろありますから、
ニーズに合う物を探せると思います。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

例えば、こんな感じでボタンを押した時にタグの挿入（選択した部分やカーソル位置に)ができます。


サンプルはボールド<b>とイタリック<i>
----------------------------------------------------------------
<!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>
<script>
<!--
var C_POS=0;
//カーソル位置を記録して置く
function c_pos(el){
var sel=document.selection.createRange();
var r=el.createTextRange();
var all=r.text.length;
r.moveToPoint(sel.offsetLeft,sel.offsetTop);
r.moveEnd("textedit");
C_POS=all-r.text.length;
}
function bold(el){
surround(el, 'b');
}
function italic(el){
surround(el, 'i');
}
function surround(elobj, elKind){
var str=selectionText(elobj);
selectionTextReplace(elobj, "<"+elKind+">" + str + "</"+elKind+">");
}
function selectionText(el){
if(document.all){ //IE
return document.selection.createRange().text;
} else { //Firefox
return el.value.substring(el.selectionStart, el.selectionEnd);
}
}
function selectionTextReplace(el, repStr){
if(document.all){ //IE
if(document.selection.createRange().text!=""){
document.selection.createRange().text = repStr;
} else {
el.value =
el.value.substring(0, C_POS) +
repStr +
el.value.substr(C_POS);
}
} else { //Firefox
el.value =
el.value.substring(0, el.selectionStart) +
repStr +
el.value.substr(el.selectionEnd);
}
}
//-->
</script>
</head>
<body>
<form name="FORM1">
<input type="button" value="Bold" onclick="bold(this.form.text)">
<input type="button" value="Italic" onclick="italic(this.form.text)"><br>
<textarea ID="text" name="text" cols="80" rows="10" onfocus="c_pos(this);" onmouseup="c_pos(this);" onkeyup="c_pos(this);">
test data

テストテキスト
</textarea>
</form>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
そっくりそのまま実行してみて、確認しました。
ただ、これを応用してリストタグなどを実現しようと思うと大変そうなので、何かフリーのJavaScriptライブラリなどをご存知でしたら教えていただけませんでしょうか。
ご丁寧にお教えくださいましたのに、こちらの説明不足で申し訳ありません。

通報する
お礼日時：2006/09/26 10:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報