概要と基本的な使い方

このサンプルでは、編集や書式設定などのさまざまなツールバー項目を設定しています。

リッチテキストエディタ(GcRichTextEditor)コントロールは、ツールバーの表示および表示項目を設定することができます。 ツールバー表示設定 toolbar プロパティを利用して、ツールバーの表示状態を切り替えることができます。デフォルト値は true で、ツールバーが表示されることを意味します。 また、toolbar プロパティに、GC.InputMan.GcRichTextEditorToolbarItem の値を割り当てることで、任意のツールバーを設定することができます。 ツールバー項目一覧 InputManJS のリッチテキストエディタ(GcRichTextEditor)コントロールは以下のツールバー項目を提供します。 分類 値 説明 ビルトイン Align AlignLeft、AlignCenter、AlignRight、AlignJustifyを含むテキストの配置 AlignCenter 中央揃え AlignJustify 両端揃え AlignLeft 左揃え AlignNone テキストの配置をデフォルトに戻す機能 AlignRight 右揃え BlockQuote 引用文 BackColor 背景色 Blocks ブロック要素 Bold 太字 Copy コピー Cut 切り取り FontFamily フォント FontSize フォントサイズ ForeColor テキストの色 H1 見出し1 H2 見出し2 H3 見出し3 HorizontalRule 水平線 Indent インデント Italic 斜体 LineHeight 行の高さ NewDocument 新しいドキュメント Outdent インデント減らす Paste 貼り付け PasteText テキスト貼り付け Print 印刷 Redo やり直し Remove 削除 RemoveFormat 書式クリア SelectAll すべて選択 Strikethrough 取り消し線 Styles Headings, Inline, Blocks, Alignを含むスタイル Subscript 下付き文字 Superscript 上付き文字 Underline 下線 Undo 取り消し SeperateLine 水平線 文字数のカウント WordCount 保存 Save 保存 Cancel キャンセル オートセーブ RestoreDraft プレビュー Preview 検索と置換 SearchReplace コード Code フルスクリーン FullScreen 画像 Image リンク Link OpenLink リンクを開く UnLink リンク削除 メディア Media テンプレート Template Unicode特殊文字 CharMap 絵文字 Emoticons 改ページ PageBreak 書字方向 RightToLeft 右から左へ LeftToRight 左から右へ リスト BulList 箇条書き NumList 段落番号付きの箇条書き テーブル TableAll テーブル全体 Table テーブル TableCellBackgroundColor テーブルの背景色 TableCopyCol 列コピー TableCopyRow 行コピー TableCutCol 列の切り取り TableCutRow 行の切り取り TableDelete テーブル削除 TableDeleteCol 列削除 TableDeleteRow 行削除 TableInsertColAfter 指定列の右側に新しい列を挿入 TableInsertColBefore 指定列の左側に新しい列を挿入 TableInsertRowAfter 指定行の下に新しい行を挿入 TableInsertRowBefore 選択行の前に新しい行を挿入 TableMergeCells セル結合 TablePasteColAfter 選択列の後に列を貼り付ける TablePasteColBefore 選択列の前に列を貼り付ける TablePasteRowAfter 選択行の後に行を貼り付ける TablePasteRowBefore 選択行の前に行を貼り付ける TableSplitCells セル分割 ツールバーモードの設定 toolbarMode プロパティを利用して、ツールバーにオーバーフロー項目が存在する場合の表示形式を設定することができます。 toolbarMode 説明 Floating 「…」ボタンが押下される時に、オーバーフロー項目はフローティング形式で表示される Sliding 「…」ボタンが押下される時に、オーバーフロー項目は固定位置で表示される Scrolling ツールバー項目はスクロール形式で表示される Wrap ツールバーに表示しきれない項目を折り返し形式で表示される 以下の例は、ツールバーモードを設定するサンプルです。
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css"; import "./styles.css"; import { InputMan } from "@mescius/inputman.richtexteditor"; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; const gcRichTextEditor = new InputMan.GcRichTextEditor( document.getElementById("gcRichTextEditor"), { watermarkText: "ここに入力してください...", baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS', plugins: ["all"], toolbar: [ InputMan.GcRichTextEditorToolbarItem.Save, InputMan.GcRichTextEditorToolbarItem.Cancel, InputMan.GcRichTextEditorToolbarItem.WordCount, InputMan.GcRichTextEditorToolbarItem.SelectAll, InputMan.GcRichTextEditorToolbarItem.RestoreDraft, InputMan.GcRichTextEditorToolbarItem.Align, InputMan.GcRichTextEditorToolbarItem.AlignCenter, InputMan.GcRichTextEditorToolbarItem.AlignJustify, InputMan.GcRichTextEditorToolbarItem.AlignLeft, InputMan.GcRichTextEditorToolbarItem.AlignNone, InputMan.GcRichTextEditorToolbarItem.AlignRight, InputMan.GcRichTextEditorToolbarItem.NewDocument, InputMan.GcRichTextEditorToolbarItem.PageBreak, InputMan.GcRichTextEditorToolbarItem.Preview, InputMan.GcRichTextEditorToolbarItem.Print, InputMan.GcRichTextEditorToolbarItem.Redo, InputMan.GcRichTextEditorToolbarItem.Undo, InputMan.GcRichTextEditorToolbarItem.Blocks, InputMan.GcRichTextEditorToolbarItem.SearchReplace, InputMan.GcRichTextEditorToolbarItem.BulList, InputMan.GcRichTextEditorToolbarItem.NumList, InputMan.GcRichTextEditorToolbarItem.Styles, InputMan.GcRichTextEditorToolbarItem.BackColor, InputMan.GcRichTextEditorToolbarItem.ForeColor, InputMan.GcRichTextEditorToolbarItem.FontFamily, InputMan.GcRichTextEditorToolbarItem.FontSize, InputMan.GcRichTextEditorToolbarItem.LineHeight, InputMan.GcRichTextEditorToolbarItem.Emoticons, InputMan.GcRichTextEditorToolbarItem.CharMap, InputMan.GcRichTextEditorToolbarItem.Remove, InputMan.GcRichTextEditorToolbarItem.Copy, InputMan.GcRichTextEditorToolbarItem.Cut, InputMan.GcRichTextEditorToolbarItem.Paste, InputMan.GcRichTextEditorToolbarItem.PasteText, InputMan.GcRichTextEditorToolbarItem.BlockQuote, InputMan.GcRichTextEditorToolbarItem.Bold, InputMan.GcRichTextEditorToolbarItem.Italic, InputMan.GcRichTextEditorToolbarItem.Strikethrough, InputMan.GcRichTextEditorToolbarItem.Subscript, InputMan.GcRichTextEditorToolbarItem.Underline, InputMan.GcRichTextEditorToolbarItem.HTMLCode, InputMan.GcRichTextEditorToolbarItem.H1, InputMan.GcRichTextEditorToolbarItem.H2, InputMan.GcRichTextEditorToolbarItem.H3, InputMan.GcRichTextEditorToolbarItem.H4, InputMan.GcRichTextEditorToolbarItem.H5, InputMan.GcRichTextEditorToolbarItem.H6, InputMan.GcRichTextEditorToolbarItem.RemoveFormat, InputMan.GcRichTextEditorToolbarItem.FullScreen, InputMan.GcRichTextEditorToolbarItem.HorizontalRule, InputMan.GcRichTextEditorToolbarItem.Image, InputMan.GcRichTextEditorToolbarItem.Link, InputMan.GcRichTextEditorToolbarItem.OpenLink, InputMan.GcRichTextEditorToolbarItem.UnLink, InputMan.GcRichTextEditorToolbarItem.Media, InputMan.GcRichTextEditorToolbarItem.Indent, InputMan.GcRichTextEditorToolbarItem.Outdent, InputMan.GcRichTextEditorToolbarItem.LeftToRight, InputMan.GcRichTextEditorToolbarItem.RightToLeft, InputMan.GcRichTextEditorToolbarItem.Template, InputMan.GcRichTextEditorToolbarItem.TableAll, ], fontFamilyList: [ "Serif", "Sans-serif", "Monospace", "Cursive", "Arial", "Times New Roman", ], toolbarMode: InputMan.GcRichTextEditorToolbarMode.Wrap, } );
<!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"> <title>リッチテキストエディタコントロール - ツールバー - 概要と基本的な使い方</title> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> window.onload = function() { System.import('./src/app'); } </script> </head> <body> <textarea id="gcRichTextEditor"></textarea> </body> </html>
body { height: 751px!important; box-sizing: content-box !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: { '@mescius/inputman': 'npm:@mescius/inputman/index.js', '@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS', '@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js', '@mescius/inputman.richtexteditor/CSS': 'npm:@mescius/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' }, } });