リッチテキストエディタ(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'
},
}
});