リッチテキストエディタ（GcRichTextEditor）コントロールは、テンプレート機能を提供します。
プラグインと設定方法
テンプレート機能を有効にするには、plugins プロパティに GcRichTextEditorPluginItem.Template の値を設定してください。
また、ツールバーに追加したい場合は GcRichTextEditorToolbarItem.Template を、コンテキストメニューに追加したい場合は GcRichTextEditorMenuItem.Template を設定します。
テンプレート内容の設定
templates プロパティを利用することで、編集エリアに挿入するテンプレートを定義することができます。
また、テンプレートを定義するには、以下の内容を設定することができます。
プロパティ
説明
title
テンプレートのタイトルを設定する
description
テンプレートの説明文を設定する
content
テンプレートの内容を設定する
テンプレートの挿入
ツールバーのテンプレートボタンからテンプレートを挿入するほか、以下の方法でソースコードからテンプレートを設定することもできます。
初期化時に指定のテンプレートを挿入する
コマンド実行で指定のテンプレートを挿入する
import * as React from "react";
import * as ReactDom from "react-dom";
import { GcRichTextEditor } from "@mescius/inputman.richtexteditor.react";
import { GcComboBox } from "@mescius/inputman.react";
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import "./styles.css";
import * as GC from "@mescius/inputman.richtexteditor";
import "@mescius/inputman/CSS/gc.inputman-js.css";
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
const App = () => {
var baseUrl =
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS';
var plugins = [GC.InputMan.GcRichTextEditorPluginItem.Template];
var toolbar = [GC.InputMan.GcRichTextEditorToolbarItem.Template];
var contextmenu = [GC.InputMan.GcRichTextEditorMenuItem.Template];
var templates = [
{
title: 'テンプレートデモ１',
description: 'InputManJS製品ヘルプ',
content:
"<p>InputManJSデモサイト</p><p><a href='https://demo.mescius.jp/inputmanjs/docs/how_to'>InputManJS製品ヘルプ</a></p>",
},
{
title: 'テンプレートデモ２',
description: 'APIリファレンス',
content:
"<p>InputManJS APIリファレンスサイト</p><p><a href='https://demo.mescius.jp/inputmanjs/api/'>InputManJS APIリファレンス</a></p>",
},
];
let gcRichTextEditor = null;
const selectedChanged = (sender) => {
gcRichTextEditor.execCommand(
GC.InputMan.GcRichTextEditorCommand.Template,
sender.selectedIndex
);
};
return (
<div>
<GcRichTextEditor
baseUrl={baseUrl}
plugins={plugins}
toolbar={toolbar}
contextmenu={contextmenu}
templates={templates}
templateIndex={0}
onInitialized={imCtrl => gcRichTextEditor = imCtrl}
/>
<table class="sample">
<tr>
<th>テンプレート挿入</th>
<td>
<GcComboBox items={['テンプレートデモ１', 'テンプレートデモ２']} selectedChanged={(sender) => selectedChanged(sender)}></GcComboBox>
</td>
</tr>
</table>
</div>
);
};
ReactDom.render(<App />, document.getElementById("app"));
<!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>
<div id="app"></div>
</body>
</html>
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: 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.react": "npm:@mescius/inputman.react/GcInputMan.component.js",
"@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
"@mescius/inputman.richtexteditor.react": "npm:@mescius/inputman.richtexteditor.react/GcInputMan.component.js",
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'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: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
