課題報告フォーム | 実用例 | InputManJSデモアプリケーション | Developer Tools〈開発支援ツール〉

InputManJSを利用して設定済みのテンプレートを挿入し、課題に対するコメントを投稿する機能を持つアプリケーションの実用例を紹介します。各コントロールで次の処理を追加しています。トピック（GcTextBox）：ヘルプアイコンで入力内容の説明を表示します。レポート種類（GcComboBox）：ドロップダウンリストより項目を選択すると、テンプレートダイアログを表示するか、設定済みのテンプレートを挿入します。課題内容（GcRichTextEditor）：設定済みのテンプレートを挿入して、レポートを作成します。コメント（GcComment）：コメントコンポーネントを使用して、コメントの追加、削除、返信、リアクションを利用できます。

import '@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css';
import '@mescius/inputman/CSS/gc.inputman-js.css';
import '@mescius/inputman.comment/CSS/gc.inputman.comment.css';
import { InputMan } from '@mescius/inputman.richtexteditor';
import * as GcCommon from '@mescius/inputman';
import * as GcCommentComponent from '@mescius/inputman.comment';
GcCommon.InputMan.appearanceStyle = GcCommon.InputMan.AppearanceStyle.Modern;
var gcTextBox = new GcCommon.InputMan.GcTextBox(document.getElementById('topic'), {
width: 700,
showHelpButton: true,
helpContent: 'ここに課題の要約を入力してください',
});
var reportCategory = new GcCommon.InputMan.GcComboBox(document.getElementById('reportCategory'), {
items: ['バグ報告', '仕様変更報告'],
isEditable: false,
});
var gcRichTextEditor = new InputMan.GcRichTextEditor(document.getElementById('gcRichTextEditor'), {
watermarkText: 'テンプレート挿入より報告書のフォーマットを設定してから編集を行ってください...',
height: 280,
width: 700,
plugins: [InputMan.GcRichTextEditorPluginItem.All],
baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
menubar: [InputMan.GcRichTextEditorMenuBarItem.Insert, InputMan.GcRichTextEditorMenuBarItem.Edit],
toolbar: [
InputMan.GcRichTextEditorToolbarItem.Print,
InputMan.GcRichTextEditorToolbarItem.Template,
InputMan.GcRichTextEditorToolbarItem.WordCount,
InputMan.GcRichTextEditorToolbarItem.FullScreen,
InputMan.GcRichTextEditorToolbarItem.Preview,
],
contextmenu: [InputMan.GcRichTextEditorMenuItem.Template],
templates: 'src/template.json',
});
const postedComments = [
{
id: '1',
userInfo: {
id: '2',
name: '葛城 孝史',
avatar: '$IMDEMOROOT$/ja/samples/examples/reportForm/img/avatar2.png',
},
content: '課題を作成しました。',
postTime: new Date(2024, 9, 1, 8, 0, 0),
updateTime: new Date(2024, 9, 1, 8, 0, 0),
reactions: [
{
reactionChar: '👍',
count: 1,
currentUserReacted: true
}
]
}
];
const gcComment = new GcCommentComponent.InputMan.GcComment(document.getElementById('gcComment'), {
editorConfig: {
editorType: GcCommentComponent.InputMan.GcCommentEditorType.GcRichTextEditor,
plugins: [InputMan.GcRichTextEditorPluginItem.All],
baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
menubar: [],
toolbar: [
InputMan.GcRichTextEditorToolbarItem.Emoticons,
InputMan.GcRichTextEditorToolbarItem.CharMap,
InputMan.GcRichTextEditorToolbarItem.SeparateLine,
InputMan.GcRichTextEditorToolbarItem.ForeColor,
InputMan.GcRichTextEditorToolbarItem.Bold,
InputMan.GcRichTextEditorToolbarItem.Italic,
InputMan.GcRichTextEditorToolbarItem.Strikethrough,
InputMan.GcRichTextEditorToolbarItem.Underline,
InputMan.GcRichTextEditorToolbarItem.SeparateLine,
InputMan.GcRichTextEditorToolbarItem.Link,
InputMan.GcRichTextEditorToolbarItem.OpenLink,
InputMan.GcRichTextEditorToolbarItem.UnLink,
],
},
userInfo: {
id: '1',
name: '森上 偉久馬',
avatar: '$IMDEMOROOT$/ja/samples/examples/reportForm/img/avatar1.png',
},
header: [],
footer: [],
watermark: {
addComment: '課題に対するコメントを入力してください...',
},
loadComments: args => {
return {
comments: postedComments
};
}
});
reportCategory.addEventListener(GcCommon.InputMan.GcComboBoxEvent.SelectedChanged, (e) => {
if (e.selectedIndex === 0) {
gcRichTextEditor.execCommand(InputMan.GcRichTextEditorCommand.Template);
} else {
gcRichTextEditor.execCommand(
InputMan.GcRichTextEditorCommand.InsertTemplate,
"<p>以下のホームページのデザインを変更します。</p><p><a href='https://demo.mescius.jp/inputmanjs/docs/how_to'>製品ヘルプ-製品紹介</a></p>"
);
}
});

<!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>
<h2 class="title">課題報告</h2>
<div class="editArea">
<div class="contents">
<label for="topic">トピック</label><br />
<input class="topic" id="topic" />
</div>
<br />
<div class="contents">
<label for="reportCategory">レポート種類</label><br />
<select id="reportCategory"></select>
</div>
<br />
<div class="contents">
<div>
<label for="gcRichTextEditor">課題内容</label><br />
<textarea id="gcRichTextEditor"></textarea>
</div>
</div>
<br />
</div>
<br />
<div class="comment">
<label for="gcRichTextEditor">コメント</label><br />
<div id="gcComment"></div>
</div>
</body>
</html>

.title .gcim {
width: 450px;
border-width: 1px;
}
body {
width: 700px;
height: 100%;
background-color: #fafdff;
position: static !important;
}
label {
font-weight: bold;
color: #007bbb;
}
.contents .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar-overlord {
background-color: #007bbb;
}
.contents .gcim__richtexteditor-editor-container {
width: 700px;
}
button {
height: 40px;
width: 120px;
font-weight: bold;
font-size: small;
border: 2px solid #83ccd2;
background: #83ccd2;
color: #fff;
border-radius: 5px;
}
button:hover {
border: 2px solid#84b9cb;
background-color: #84b9cb;
}
.displayArea {
color: #38a1db;
font-size: 14px;
font-family: 'メイリオ', serif;
}
#content {
background-color: #f5f5f5;
}

.title {
text-align: center;
font-size: 28px;
font-weight: bold;
margin: 20px 0;
color: #333;
}
[gcim-control-appearance="modern"] .topic .gcim {
width: 450px;
border-width: 1px;
}
body {
width: 700px;
height: 100%;
background-color: #fafdff;
position: static !important;
}
[gcim-control-appearance="modern"] label {
font-weight: bold;
color: #555;
}
[gcim-control-appearance="modern"] .contents .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar-overlord {
background-color: #007bbb;
}
[gcim-control-appearance="modern"].contents .gcim__richtexteditor-editor-container {
width: 700px;
}
button {
height: 40px;
width: 120px;
font-weight: bold;
font-size: small;
border: 2px solid #83ccd2;
background: #83ccd2;
color: #fff;
border-radius: 5px;
}
button:hover {
border: 2px solid#84b9cb;
background-color: #84b9cb;
}
[gcim-control-appearance="modern"] .displayArea {
color: #38a1db;
font-size: 14px;
font-family: 'メイリオ', serif;
}
[gcim-control-appearance="modern"] #content {
background-color: #f5f5f5;
}
.gcim__gccomment .gcim__gccomment-commentcontainer {
color: #202020e0;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 6px;
margin: 10px;
padding: 12px;
}
.gcim__gccomment .add_comment_wrapper .add_comment_action {
display: flex;
justify-content: flex-end;
}
.gcim__gccomment-addcommentwrapper .add_comment_wrapper .add_comment_action .btn_save {
font-weight: 600;
color: #ffffff !important;
background-color: #4CAF50 !important;
border: none;
border-radius: 4px;
padding: 12px 24px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.gcim__gccomment-addcommentwrapper .add_comment_wrapper .add_comment_action .btn_cancel {
background-color: #f44336 !important;
font-weight: 600;
color: #ffffff !important;
border: none;
border-radius: 4px;
padding: 12px 24px;
transition: background-color 0.3s ease, transform 0.2s ease;
}

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',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/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',
},
},
});