InputManJSを利用してタイトル、カテゴリー、投稿日時、投稿内容といったブログ投稿のシナリオを想定した実用例を確認することができます。各コントロールで次の処理を追加しています。
タイトル欄（GcTextBox）：ウォーターマークを利用して、入力内容の説明を追加しています
カテゴリー（GcComboBox）、投稿時刻欄（GcDateTime）：ヘルプアイコンを利用して、入力内容の説明を追加しています
記事入力欄（GcRichTextEditor）：ブログ投稿に必要なメニュー項目と配置でのツールバーを表示しています。また、プレビューボタンからのGcRichTextEditorに設定されている内容をプレビューで確認することができます。
投稿ボタンを押下すると、各コントロールに設定した内容を表示することができます。投稿を押下した後にはプレビューを実行することはできません。
新規投稿ボタンを押下すると、各コントロールを初期化し再度記事の内容を設定することができます。
import '@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css';
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman.richtexteditor';
import * as GcCommon from '@mescius/inputman';
GcCommon.InputMan.appearanceStyle = GcCommon.InputMan.AppearanceStyle.Modern;
const gcRichTextEditor = new InputMan.GcRichTextEditor(document.getElementById('gcRichTextEditor'), {
plugins: [InputMan.GcRichTextEditorPluginItem.All],
menubar: null,
toolbar: [
'bold',
'italic',
'underline',
'strikethrough',
'forecolor',
'backcolor',
'blocks',
'fontfamily',
'fontsize',
'|',
'undo',
'redo',
'align',
'lineheight',
'table',
'outdent',
'indent',
'bullist',
'numlist',
'|',
'restoredraft',
'htmlcode',
'image',
'link',
'media',
'charmap',
'emoticons',
'blockquote',
],
baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
toolbarMode: InputMan.GcRichTextEditorToolbarMode.Wrap,
watermarkText: 'ここに記事の内容を入力してください...',
});
const gcTextBox = new GcCommon.InputMan.GcTextBox(document.getElementById('title'), {
watermarkDisplayNullText: 'ここにタイトルを入力してください...',
text: '麵屋 後楽園＠泉中央',
});
const gcComboBox = new GcCommon.InputMan.GcComboBox(document.getElementById('gcComboBox'), {
items: ['芸能', 'スポーツ', '政治', 'IT', 'グルメ', '特になし'],
isEditable: false,
showHelpButton: true,
helpContent: 'ブログのカテゴリーを設定してください',
});
gcComboBox.selectedIndex = 4;
let now = new Date();
const gcDateTime = new GcCommon.InputMan.GcDateTime(document.getElementById('gcDateTime'), {
showDropDownButton: true,
value: null,
value: now,
showHelpButton: true,
helpContent: '投稿予定時間を設定してください。',
});
document.getElementById('previewbtn').addEventListener('click', () => {
if (document.getElementById('imfm').style.display === 'none') return;
gcRichTextEditor.execCommand(InputMan.GcRichTextEditorCommand.Preview);
});
document.getElementById('post').addEventListener('click', () => {
if (document.getElementById('imfm').style.display === 'none') return;
document.getElementById('imfm').style.display = 'none';
document.getElementById('content').style.display = 'block';
let title = '<h1>' + gcTextBox.text + '</h1>';
let posttime = '<p>' + gcDateTime.text + '</p>';
let category = '<p>カテゴリー:' + gcComboBox.selectedValue + '</p>';
document.getElementById('content').innerHTML = title + '<hr class="separator">' + posttime + category + gcRichTextEditor.getContent('html');
});
document.getElementById('new').addEventListener('click', () => {
document.getElementById('imfm').style.display = 'block';
document.getElementById('content').style.display = 'none';
gcTextBox.text = null;
gcComboBox.selectedIndex = 5;
gcDateTime.value = new Date();
gcRichTextEditor.execCommand(InputMan.GcRichTextEditorCommand.NewDocument);
});
<!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>記事の投稿</h2>
<button id="previewbtn" class="btn">プレビュー</button>
<button id="post" class="btn">投稿</button>
<button id="new" class="btn">新規投稿</button>
<form id="imfm" action="" target="_parent" class="form">
<div class="editArea">
<div class="title">
<input id="title">
</div>
<div class="setting">
<div class="combo">
<label for="gcComboBox">カテゴリー：</label>
<select id="gcComboBox"></select>
</div>
<div class="date">
<label for="gcDateTime">投稿時刻：</label>
<input id="gcDateTime">
</div>
</div>
<div class="editor">
<textarea id="gcRichTextEditor">
<p>2023年5月3日、仙台市泉区の「麵屋 後楽園」にお邪魔した。</p>
<p>泉中央駅から徒歩で8分くらい。昼時だったため、先客が5名ほど。</p>
<p> チャーシュー麺 850円</p>
<p><img src="$IMDEMOROOT$/ja/images/ramen_chashu.png" alt="" width="300" height="220"></p>
<p>タイミングが合えばまたリピートしたい😀</p>
<p>お店の情報:<a href="https://developer.mescius.jp/inputmanjs" target="_blank" rel="noopener">URL</a></p>
</textarea>
</div>
</div>
</form>
<div id="content">
</div>
</body>
</html>
body {
margin-top: 10px;
}
button.btn{
height: 45px;
font-weight: bold;
border: 2px solid #2da6cf;
background:#2da6cf;
color: #fff;
border-radius: 5px;
}
button.btn:hover {
border: 2px solid#58bee0;
background-color: #58bee0;
}
label{
font-weight: bold;
}
.form {
background-color: whitesmoke;
margin-top: 5px
}
.editArea {
padding: 10px;
}
.editArea{
border: 1px solid;
border-color: rgb(0, 125, 153);
}
.setting{
background-color: white;
border: 1px solid;
border-color: rgb(0, 125, 153);
margin-top: 10px;
height: 105px;
padding-left: 5px;
}
.combo{
padding-top: 10px
}
.date{
padding-top: 20px
}
.title .gcim {
width: 600px;
border-width: 1px;
border-color: rgb(0, 125, 153);
max-width: 100%;
}
.title .gcim__input {
font-size: 20px;
}
.editor{
padding-top: 10px
}
.gcim__richtexteditor-tbtn.gcim__richtexteditor-tbtn--select.gcim__richtexteditor-tbtn--bespoke{
width: 100px
}
.gcim_watermark_null {
color: rgb(226, 224, 224)
}
#content{
display: none
}
body {
margin-top: 10px;
}
[gcim-control-appearance="modern"] button.btn {
height: 45px;
font-weight: bold;
border: 2px solid #2da6cf;
background: #2da6cf;
color: #fff;
border-radius: 5px;
}
[gcim-control-appearance="modern"] button.btn:hover {
border: 2px solid#58bee0;
background-color: #58bee0;
}
[gcim-control-appearance="modern"] label {
font-weight: bold;
}
[gcim-control-appearance="modern"] .form {
background-color: whitesmoke;
margin-top: 5px;
}
[gcim-control-appearance="modern"] .editArea {
padding: 10px;
}
[gcim-control-appearance="modern"] .editArea {
border: 1px solid;
border-color: rgb(0, 125, 153);
}
[gcim-control-appearance="modern"] .setting {
background-color: white;
border: 1px solid;
border-color: rgb(0, 125, 153);
margin-top: 10px;
height: 105px;
padding-left: 5px;
}
[gcim-control-appearance="modern"] .combo {
padding-top: 10px;
}
[gcim-control-appearance="modern"] .date {
padding-top: 20px;
}
[gcim-control-appearance="modern"] .title .gcim {
width: 600px;
border-width: 1px;
border-color: rgb(0, 125, 153);
max-width: 100%;
}
[gcim-control-appearance="modern"] .title .gcim__input {
font-size: 20px;
}
[gcim-control-appearance="modern"] .editor {
padding-top: 10px;
}
[gcim-control-appearance="modern"] .gcim__richtexteditor-tbtn.gcim__richtexteditor-tbtn--select.gcim__richtexteditor-tbtn--bespoke {
width: 100px;
}
[gcim-control-appearance="modern"] .gcim_watermark_null {
color: rgb(226, 224, 224);
}
[gcim-control-appearance="modern"] #content {
display: none;
}
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'
},
}
});
