コメントの操作

このサンプルではコメントの下部に表示されているコメントの操作項目の使用方法を確認することができます。

コメントコンポーネントのコメントの操作項目について解説します。 組込みの項目 コメントコンポーネントのコメント操作項目には「返信」「編集」「削除」「リアクションの追加」「分割線」を表示できます。 commentActionプロパティを利用して、表示するコメント操作項目を設定することができます。commentInfoActionプロパティには、GcCommentCommentActionItem列挙体の次の値を設定することができます。 GcCommentCommentActionItemの値 説明 Reply 返信 Edit 編集 Delete 削除 SeparateLine 分割線 AddReactions リアクションの追加 設定例は以下の通りです。 カスタム項目 コメントの操作項目にカスタム項目を追加するには、commentActionItemインターフェースで項目を定義し、commentActionプロパティに追加します。以下の例では、報告ボタンを追加し、クリック時に確認ダイアログを表示します。
import "./styles.css"; import "@mescius/inputman.comment/CSS/gc.inputman.comment.css"; import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css"; import { InputMan } from "@mescius/inputman.comment"; import * as RichTextEditorControl from "@mescius/inputman.richtexteditor"; import { postedComments } from './data'; const gcComment = new InputMan.GcComment(document.getElementById('gcComment'), { commentAction: [ InputMan.GcCommentCommentActionItem.AddReactions, InputMan.GcCommentCommentActionItem.SeparateLine, InputMan.GcCommentCommentActionItem.Reply, InputMan.GcCommentCommentActionItem.Edit, InputMan.GcCommentCommentActionItem.Delete, InputMan.GcCommentCommentActionItem.SeparateLine, 'report', ], commentActionItem: { report: { name: 'report', getElement: () => { let buttonElement = document.createElement('buttonElement'); buttonElement.innerText = '報告'; buttonElement.style.color = 'white'; buttonElement.style.backgroundColor = 'red'; buttonElement.style.border = 'none'; buttonElement.style.display = 'flex'; buttonElement.style.alignItems = 'center'; buttonElement.style.justifyContent = 'center'; buttonElement.style.fontSize = '12px'; buttonElement.style.cursor = 'pointer'; buttonElement.style.width = '40px'; buttonElement.style.height = '25px'; buttonElement.addEventListener('click', () => { alert('報告されました。'); buttonElement.innerText = '報告済み'; buttonElement.style.color = 'white'; buttonElement.style.backgroundColor = 'green'; buttonElement.style.width = '60px'; buttonElement.style.height = '25px'; }); return buttonElement; }, shouldAppendItem: () => { return true; }, }, }, editorConfig: { editorType: InputMan.GcCommentEditorType.GcRichTextEditor, baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS', plugins: [RichTextEditorControl.InputMan.GcRichTextEditorPluginItem.All], height: 150, menubar: [], toolbar: [ RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Emoticons, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.CharMap, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.ForeColor, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Bold, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Italic, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Strikethrough, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Underline, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Link, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.OpenLink, RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.UnLink, ] }, userInfo: { id: '1', name: '森上 偉久馬', avatar: '$IMDEMOROOT$/ja/samples/comment/commentAction/img/avatar1.png', }, loadComments: (args) => { return { comments: postedComments, }; }, });
<!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"> <meta name="description" content="コメントコンポーネント 使い方" lang="ja" xml:lang="ja" /> <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="gcComment"></div> </body> </html>
body { box-sizing: content-box !important; height: 551px !important; }
export const postedComments = [ { id: '1', userInfo: { id: '1', name: '森上 偉久馬', avatar: '$IMDEMOROOT$/ja/samples/comment/commentAction/img/avatar1.png', }, content: 'このサンプルではコメントの操作の表示項目を設定しています。', postTime: new Date(2024, 1, 1, 8, 0, 0), updateTime: new Date(2024, 1, 1, 8, 0, 0), reactions: [ { reactionChar: '👍', count: 2, }, ], }, { id: '2', userInfo: { id: '3', name: '加藤 泰江', avatar: '$IMDEMOROOT$/ja/samples/comment/commentAction/img/avatar3.png', }, content: 'コメントの操作にはデフォルトで「返信」「編集」「削除」「分割線」「リアクション」が表示されますが、カスタム項目も追加できます。', postTime: new Date(2024, 4, 20, 8, 1, 1), updateTime: new Date(2024, 4, 20, 8, 1, 1), reactions: [ { reactionChar: '👍', count: 3, currentUserReacted: true, }, ], }, { id: '3', userInfo: { id: '5', name: '松沢 誠一', avatar: '$IMDEMOROOT$/ja/samples/comment/commentAction/img/avatar5.png', }, content: 'カスタムアクションとして報告ボタンを追加しました。不適切なコメントを見つける場合は直ちに報告しましょう。', postTime: new Date(2024, 7, 16, 8, 1, 59), updateTime: new Date(2024, 7, 16, 8, 1, 59), reactions: [ { reactionChar: '🤔', count: 1, }, ], }, { id: '4', userInfo: { id: '6', name: '成宮 真紀', avatar: '$IMDEMOROOT$/ja/samples/comment/commentAction/img/avatar6.png', }, content: 'よく使っているリアクションボタンを最初に配置してみました!', postTime: new Date(2024, 7, 18, 8, 1, 50), updateTime: new Date(2024, 7, 18, 8, 1, 50), parentCommentId: '2', reactions: [ { reactionChar: '👍', count: 3, currentUserReacted: true, }, ], }, ];
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' }, } });