AngularJS と wijeditor

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、Editor を HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」を参照してください。

新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
- <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
- <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。
ドロップダウンからマークアップをコピーします
任意のテキストエディタに貼り付けます。
コードのコピー

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。

1 つは AngularJS 自身です。
もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます

参照	コードのコピー
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20173.128.min.js"></script>

<head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、単純なコントローラーを作成します。

コントローラーで $scope パラメータを使用して、データコンテキストを制御します。
各コマンドボタンに modeCommands スコープを追加し、simple-mode-commands ディレクティブで使用します。
HTML に text スコープを追加し、text ディレクトリで使用します。

スクリプト	コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) { $scope.modeCommands = ["Bold", "Italic", "FontName", "FontSize", "InsertImage", "NumberedList", "BulletedList", "Undo"]; $scope.text = '<h2>Blippity Fling-Flang</h2>' + '<p>Ho ha meepfloo hum nip zongle, yap izzle ho noodle da. Doo twaddle zap? dilznoofus Jackson. ' + 'Loo cake blungflib. Yip dingle ha? bang Mr. Slav. Flab zap dingely dizzleshrubbery. Quabble ha ' + 'blop da shnuzzle-slap!! Funk hum zang shnuzzle? Crongle loo twaddling hizzywoogle.</p>' + '<p><a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></p>'; } </script>

スクリプト

コードのコピー

<script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
        $scope.modeCommands = ["Bold", "Italic", "FontName", "FontSize", "InsertImage", "NumberedList", "BulletedList", "Undo"];
        $scope.text = '<h2>Blippity Fling-Flang</h2>' + 
            '<p>Ho ha meepfloo hum nip zongle, yap izzle ho noodle da. Doo twaddle zap? dilznoofus Jackson. ' + 
            'Loo cake blungflib. Yip dingle ha? bang Mr. Slav. Flab zap dingely dizzleshrubbery. Quabble ha ' +
            'blop da shnuzzle-slap!! Funk hum zang shnuzzle? Crongle loo twaddling hizzywoogle.</p>' +
            '<p><a href="http://bff.orangehairedboy.com/">Blippity Fling-Flang by orangehairedboy</a></p>';
    }
</script>

<body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、「クイックスタート」を参照してください。<wij-Editor> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
- HTML ペインと WYSIWYG ペインの両方を表示するため、editorMode オプション（editor-mode ディレクティブ）を「split」に設定します。
- ツールバーに基本的なボタンだけを表示するため、mode ディレクティブを「simple」に設定します。
- スクリプトで設定した text スコープを使用するように、text ディレクティブを設定します。
- simpleModeCommands オプション（simple-mode-commands ディレクティブ）を、スクリプトで設定した modeCommands スコープに設定します。
- style 属性の設定により、エディタの高さと幅を制御します。
マークアップ
コードのコピー
<wij-editor editor-mode="split" mode="simple" text="text" simple-mode-commands="modeCommands" style="width: 580px; height: 380px;"> </wij-editor>
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照