Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Editor > クイックスタート |
このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに Editor ウィジェットを追加する方法について学びます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンから参照コードをコピーして head タグ内に貼り付けます
| 参照 |
コードのコピー |
|---|---|
<!--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" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> | |
ドロップダウンからマークアップをコピーして body タグ内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<textarea id="wijeditor" style="width: 756px; height: 475px;"> <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> | |
ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijeditor"], function () { $(document).ready(function () { $("#wijeditor").wijeditor({ editorMode: "split", mode: "simple", simpleModeCommands: ["Bold", "Italic", "FontName","FontSize","InsertImage", "NumberedList", "BulletedList", "Undo"] }); }); }); </script> | |
全て展開
すべて折りたたむ