概要

リッチテキストエディタ(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'; const gcRichTextEditorClassic1 = new InputMan.GcRichTextEditor(document.getElementById('gcRichTextEditor1'), { baseUrl: '../../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' }, } });