JavaScript + Ajax 実践サンプル集 - jQueryのCaretプラグインでMS Word風のミニバーを表示する

jQueryのCaretプラグインでMS Word風のミニバーを表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのCaretプラグインを利用してMS Word風のミニバーを表示します。サンプルが表示されたらテキストエリアの単語をドラッグして選択してください。マウスをリリースすると右上のミニバーが表示されますので「b i u Link」から選択します。たとばえ、[b](bold)を選択すると、Previewに選択した単語が太字で表示されます。

このサンプルを編集して試してみる

このサンプルの解説はここを参照してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>MS Word like minbar</title>
  <link href="jQuery/minbar/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jQuery/minbar/jquery.caret.1.02.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var mouseX = 0;
      var mouseY = 0;

$("#description").mousemove(function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
      });

$("#description").mousedown(function () {
        $("#menu").fadeOut("1000");
      });

$("#description").select(function () {

$("#menu").css("top", mouseY - 30).css("left", mouseX + 10).fadeIn("1000");
      });

$("#bold").click(function () {
        wrapText("<b>", "</b>");
        $("#menu").fadeOut("1000");
      });

$("#italic").click(function () {
        wrapText("<i>", "</i>");
        $("#menu").fadeOut("1000");
      });

$("#underline").click(function () {
        wrapText("<u>", "</u>");
        $("#menu").fadeOut("1000");
      });

$("#link").click(function () {
        var url = prompt("Enter URL", "http://");
        if (url != null)
          wrapText("<a href='" + url + "'>", "</a>");
        $("#menu").fadeOut("1000");
      });

function wrapText(startText, endText) {
        var before = $("#description").val().substring(0, $("#description").caret().start);
        var after = $("#description").val().substring($("#description").caret().end, $("#description").val().length);
        $("#description").val(before + startText + $("#description").caret().text + endText + after);
        $("#preview").html($("#description").val());
      }
    });
  </script>
</head>
<body>
  <div id="main">
    <div>
      <p style="font-size: 16px;">
        Select some text here:<br />
        <textarea id="description" rows="8" cols="50">The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

Preview:

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのCaretプラグインでMS Word風のミニバーを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryのCaretプラグインでMS Word風のミニバーを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!