テーブル | リッチテキストエディタコントロール | InputManJSデモアプリケーション

リッチテキストエディタ（GcRichTextEditor）コントロールは、テーブル要素を挿入することができます。テーブルの挿入テーブル機能を有効化するには、pluginsプロパティにGcRichTextEditorPluginItem.Tableの値を設定してください。設定可能なテーブルメニューテーブル機能では、ツールバーとメニューバー/コンテキストメニューにそれぞれ次のメニュー項目を追加することができます。ツールバー(toolbar)に設定可能なメニュー一覧 GcRichTextEditorToolbarItemの値説明 Table テーブル要素を作成/編集します TableDelete テーブルを削除します TableCopyRow 現在の行をクリップボードにコピーします TableCutRow 現在の行をクリップボードに切り取ります TableDeleteCol 現在の列を削除します TableInsertColAfter 現在の列の後に列を挿入します TableInsertColBefore 現在の列の前に列を挿入します TableInsertRowAfter 現在の行の後に行を挿入します TableInsertRowBefore 現在の行の前に行を挿入します TablePasteRowAfter クリップボードの行を現在の行の後に張り付けます TablePasteRowBefore クリップボードの行を現在の行の前に張り付けます TableMergeCells 現在選択されているセルを結合します TableSplitCells 現在選択されているセルの結合を解除します TableCellBackgroundColor 現在選択されているセルの背景色を選択しますメニューバー/コンテキストメニューに設定可能なメニュー一覧 GcRichTextEditorMenuItem 説明 InsertTable テーブルメニューを設定します DeleteTable テーブルを削除します Cell セルメニューを設定します TableMergeCells 現在選択されているセル結合します TableSplitCells 現在選択されているセルの結合を解除します Column 列メニューを設定します TableInsertColumnAfter 現在の列の後に列を挿入します TableInsertColumnBefore 現在の列の前に列を挿入します TableCopyColumn 現在の列をコピーします TableCutColumn 現在の列を切り取ります TablePasteColumnAfter 現在の列の後に列を貼り付けます TablePasteColumnBefore 現在の列の前に列を貼り付けます TableDeleteColumn 現在の列を削除します Row 行メニューを設定します TableInsertRowAfter 現在の行の後に行を挿入します TableInsertRowBefore 現在の行の前に行を挿入します TableCutRow 現在の行を切り取ります TableCopyRow 現在の行をコピーします TablePasteRowAfter 現在の行の後に行を貼り付けます TablePasteRowBefore 現在の行の前に行を貼り付けます TableDeleteRow 現在の行を削除します TableCellBackgroundColor 現在選択されているセルの背景色を選択します

import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import { InputMan } from "@mescius/inputman.richtexteditor";
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcRichTextEditor = new InputMan.GcRichTextEditor(
document.getElementById("gcRichTextEditor"),
{
baseUrl:
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
plugins: [InputMan.GcRichTextEditorPluginItem.Table],
contextmenu: [
InputMan.GcRichTextEditorMenuItem.InsertTable,
InputMan.GcRichTextEditorMenuItem.Table,
],
}
);

<!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>

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'
},
}
});