概要

リッチテキストエディタ(GcRichTextEditor)コントロールは、WYSIWYGライクなエディタを提供するコントロールです。 メニューバー、ツールバー、ショートカットなど用途に応じた任意のメニュー項目を設定することができます。

このサンプルでは、あらかじめ設定したいコンテンツをHTMLファイル内に指定しています。

GcRichTextEditorはそれぞれ次のファイルからインポートします。 モジュールファイル:@grapecity/inputman.richtexteditor CSSファイル:@grapecity/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css 初期化を行う場合は、textarea要素に対してコントロールをホストするようにしてください。
import "@grapecity/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css"; import "./styles.css"; import { InputMan } from "@grapecity/inputman.richtexteditor"; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; const gcRichTextEditorClassic1 = new InputMan.GcRichTextEditor( document.getElementById("gcRichTextEditor1"), { baseUrl: window.location.origin + "/inputmanjs/demos/lib/purejs/node_modules/@grapecity/inputman.richtexteditor/JS", plugins: [InputMan.GcRichTextEditorPluginItem.All], toolbar: [ "newdocument", "restoredraft", "preview", "print", "undo", "redo", "cut", "copy", "paste", "pastetext", "selectall", "searchreplace", "htmlcode", "fullscreen", "image", "link", "media", "template", "charmap", "emoticons", "hr", "pagebreak", "blockquote", "bold", "italic", "underline", "strikethrough", "superscript", "subscript", "styles", "fontfamily", "fontsize", "align", "lineheight", "forecolor", "backcolor", "removeformat", "wordcount", "table", "ltr", "rtl", "outdent", "indent", "bullist", "numlist", ], height: 500, } );
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="description" content="リッチテキストエディタ 使い方" lang="ja" xml:lang="ja" /> <title>リッチテキストエディタコントロール - 概要</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <textarea id="gcRichTextEditor1"> <h1>GcRichTextEditorデモのへようこそ</h1> <p>このデモではGcRichTextEditorコントロールの簡単な説明を行います。</p> <h1>GcRichTextEditorの機能</h1> <p>GcRichTextEditorでは文字書式の設定、テーブル挿入、箇条書きや段落番号の挿入などの一般的なWYSIWYGの機能に加えて便利な機能を搭載しています。</p> <p>ここではその一例を紹介します。</p> <h3>表示言語の変更</h3> <p>コントロール内のメニューやラベルなどの表示言語を切り替えることができます。現在は、次の言語の切り替えをサポートしています。</p> <ul style="list-style-type: circle;"> <li>日本語</li> <li>英語</li> </ul> <p>日本語表示モードのイメージは以下の通りです。</p> <p><img src="../../../../images/gcrichtexteditor_langja.png" alt="" width="680" height="363"></p> <p>英語表示モードのイメージは以下の通りです。</p> <p><img src="../../../../images/gcrichtexteditor_langen.png" alt="" width="680" height="363"></p> <p>より詳細な動作については、<a href="../../../../../richTextEditor/language/purejs" target="_blank" rel="noopener">デモページ</a>から確認することができます。</p> <h2>GcRichTextEditor利用時の注意点</h2> <p>GcRichTextEditorコントロールは<strong>@grapecity/inputman.richtexteditor</strong>モジュールからインポートすることができます。CSSファイルは<strong>gc.inputman.richtexteditor.css</strong>からインポートします。InputManJSにはその他のコントロールが定義してある、<strong>@grapecity/inputman</strong>モジュールも存在します。お間違いの無いようご注意ください。</p> </textarea> </body> </html>
body { box-sizing: content-box !important; height: 551px!important; }
System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', '@grapecity/inputman.richtexteditor': 'npm:@grapecity/inputman.richtexteditor/index.js', '@grapecity/inputman.richtexteditor/CSS': 'npm:@grapecity/inputman.richtexteditor/CSS', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } });