その他のUIコントロール (4/4)

■リッチテキストボックス

テキスト編集可能なコントロールというのは、<input type="text">や<textarea>といったものを使って用意することができました。が、これらはマルチフォントのテキストをペーストしたり編集したりすることはできません。

こうしたマルチフォント対応の「リッチテキスト」を編集できるようにするリッチテキストボックスがModern UIには用意されています。――といっても、実はこれも専用のコントロールなどではありません。HTML5に新たに用意されている機能を利用しているだけです。

<div contentEditable="true"></div>

これだけ。コントロールですらありません。ごく普通のタグに「contentEditable」を指定するだけで、そのタグのテキストが編集可能になってしまうのです。なんて便利！

ただし、編集可能にはなるのですが、実際、そのテキストを編集しようとなると、別の壁にぶつかることになるでしょう。すなわち、「どうやってフォントやスタイルを変更したらいいのか？」という問題です。編集可能にはなっても、別に選択したテキストをボールドにしたりフォントサイズを変えたりといったツールが提供されるわけではありません。そうしたものが必要なら、自分で作らないといけません。

ただし、contentEditableで編集可能になったテキストに対して操作を行う場合、あわせてJavaScriptに追加された「execCommand」というメソッドを利用することで割りと簡単に処理を実装することができます。これは以下のように記述されます。

document.execCommand( コマンド , 真偽値 , パラメータ );

第1引数に実行するコマンドを指定します。第2引数にはデフォルトのUIを示すための値が指定されますが、これは基本的に「falseを指定する」と考えてください。第3引数には、コマンドを実行するのに必要なパラメータなどがあればそれを指定します。第２，３引数は省略することも可能です。

利用可能な主なコマンドとしては以下のようなものがあります。

bold――選択部分のボールドをOn/Offします。（パラメータなし）
italic――選択部分のイタリックをOn/Offします。（パラメータなし）
underline――選択部分のアンダーラインをOn/Offします。（パラメータなし）
fontName――選択部分のフォント名を設定します。パラメータにはフォント名を指定します。
fontSize――選択部分のフォントサイズを設定します。パラメータには１～７の整数を指定します。
foncColor――選択部分のテキスト色を設定します。パラメータには色の値を指定します。
backColor――選択部分の背景色を設定します。パラメータには色の値を指定します。
cut, copy, paste, undo, redo――選択部分に対しカット・コピー・ペースト・アンドゥ・リドゥを実行します。（パラメータなし）

この他にもいろいろあるんですが、まぁ編集可能なテキストのスタイル設定を行うためのものとしては、この程度知っていれば十分でしょう。

では、下のリスト欄に簡単な利用例を挙げておきましょう。ここでは、テキスト編集可能なリッチテキストボックスの下に「Bold」「Italic」「Underline」「FontSize」といったボタンを用意しておきました。「FontSize」は、クリックすると１～７の数字のポップアップメニューが現れ、これでフォントサイズを変更できます。他のものはクリックするとスタイルの設定をOn/Offします。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※HTMLの<body>タグ部分

<body>
    <h1 id="title">Sample Page</h1>
    <p id="msg">this is list sample page.</p>

    <div contentEditable="true" 
        style="width:500px; height:300px; color:black; background-color:white;"></div>
    <button id="button1">Bold</button>
    <button id="button2">Italic</button>
    <button id="button3">Underline</button>
    <button id="button4">FontSize</button>
    <div data-win-control="WinJS.UI.Menu" id="menu1">
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd1"
            data-win-options="{label:'1', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd2"
            data-win-options="{label:'2', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd3"
            data-win-options="{label:'3', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd4"
            data-win-options="{label:'4', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd5"
            data-win-options="{label:'5', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd6"
            data-win-options="{label:'6', section:'global'}"></button>
        <button data-win-control="WinJS.UI.MenuCommand" id="cmd7"
            data-win-options="{label:'7', section:'global'}"></button>
    </div>
</body>


※JavaScriptのスクリプト

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.
                ApplicationExecutionState.terminated) {} else {}
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                document.getElementById("button1").addEventListener("click", button1Click);
                document.getElementById("button2").addEventListener("click", button2Click);
                document.getElementById("button3").addEventListener("click", button3Click);
                document.getElementById("button4").addEventListener("click", button4Click);
                document.getElementById("cmd1").addEventListener("click", cmdAction, false);
                document.getElementById("cmd2").addEventListener("click", cmdAction, false);
                document.getElementById("cmd3").addEventListener("click", cmdAction, false);
                document.getElementById("cmd4").addEventListener("click", cmdAction, false);
                document.getElementById("cmd5").addEventListener("click", cmdAction, false);
                document.getElementById("cmd6").addEventListener("click", cmdAction, false);
                document.getElementById("cmd7").addEventListener("click", cmdAction, false);
            }));
        }
    }

    app.oncheckpoint = function (args) {}

    // ※追加した関数
    function button1Click(event) {
        document.execCommand("bold");
    }
    function button2Click(event) {
        document.execCommand("italic");
    }
    function button3Click(event) {
        document.execCommand("underline");
    }
    function button4Click(event) {
        document.getElementById("menu1").winControl.show(event.target, "bottom");
    }
    function cmdAction(event) {
        var val = event.target.winControl.label;
        document.execCommand("fontsize", false, val);
    }

    app.start();
})();

<< 前へ　

記事のリストに戻る

PC Site G+ mail