本製品ではコントロールの高さや幅などのサイズのほか、背景色や文字色などを含め、コントロールの外観はすべてCSS(Cascading Style Sheet)により設定します。
コントロールで使用されるCSSクラスの詳細については、以下の製品ヘルプをご参照ください。
コントロールの外観設定
リッチテキストエディタコントロールのCSS
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import { InputMan } from "@mescius/inputman.richtexteditor";
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcRichTextEditor1 = new InputMan.GcRichTextEditor(
document.getElementById("gcRichTextEditor1"),
{
watermarkText: "ここに入力してください...",
height: 200,
baseUrl:
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
}
);
const gcRichTextEditor2 = new InputMan.GcRichTextEditor(
document.getElementById("gcRichTextEditor2"),
{
watermarkText: "ここに入力してください...",
height: 200,
baseUrl:
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
contentStyle: `
body {
color: white;
}
`,
}
);
<!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 class="flexbox">
<div>通常のスタイル
<textarea id="gcRichTextEditor1"></textarea>
</div>
<div class="changeStyle">スタイルを変更する(ダークモード風)
<textarea id="gcRichTextEditor2"></textarea>
</div>
</div>
</body>
</html>
.changeStyle .gcim__richtexteditor.richtexteditor {
border-color: #000;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header {
color: white;
background-color: #212121;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header button{
color: white;
background-color: #212121;
}
/* menuBar style */
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar {
background-color: #333333;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar button.gcim__richtexteditor-mbtn {
background-color: #4f4c4f;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar button.gcim__richtexteditor-mbtn:hover {
border-color: #0A0A0A;
color: white;
background-color: #0A0A0A;
}
/* menu hover */
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list {
background-color: #0A0A0A;
}
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list div.gcim__richtexteditor-collection__item.gcim__richtexteditor-collection__item--active,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item.gcim__richtexteditor-collection__item--enabled {
background-color: #5c5c5c82;
}
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item-label,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item-accessory {
color: #d9d9d9;
}
/* toobar style */
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar-overlord {
background-color: gray;
}
.changeStyle .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar__primary,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__overflow[role="group"],
.changeStyle .gcim__richtexteditor-editor-header > .gcim__richtexteditor-toolbar {
background-color: #333333;
}
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__overflow[role="group"] .gcim__richtexteditor-tbtn__select-label {
color: white;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn .gcim__richtexteditor-icon div.new-document {
background-image: url("https://www.grapecity.com/favicon/favicon-32x32.png");
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn,
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn:focus,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn:focus {
background-color: #212121;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group button.gcim__richtexteditor-tbtn:hover,
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group span.gcim__richtexteditor-tbtn:hover,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group button.gcim__richtexteditor-tbtn:hover,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group span.gcim__richtexteditor-tbtn:hover {
border-color: #5b5b5b;
background-color: #0A0A0A;
}
.changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container [role="toolbar"].gcim__richtexteditor-toolbar__group {
border-color: gray;
}
[gcim__richtexteditor-original_id="gcRichTextEditor2"].gcim__richtexteditor div.gcim__richtexteditor-toolbar__overflow {
box-shadow: 0 0 2px 0 rgb(32 110 201), 0 4px 8px 0 rgb(96 96 96);
}
/* edit area */
.changeStyle .gcim__richtexteditor iframe.gcim__richtexteditor-edit-area__iframe {
background-color: #333333;
}
/* color picker */
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-swatches-menu.gcim__richtexteditor-selected-menu,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection .gcim__richtexteditor-swatches-menu {
background-color: #4a4949;
}
/* dialoug */
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-dialog__header,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-dialog__footer,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-textfield,
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-textfield:focus {
background-color: #333333;
color: white;
}
/* context toolbar */
[gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-pop .gcim__richtexteditor-pop__dialog {
border-color: gray;
background-color: #333333;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor.richtexteditor {
border-color: #000;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header {
color: white;
background-color: #212121;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header button {
color: white;
background-color: #212121;
}
/* menuBar style */
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar {
background-color: #333333;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar button.gcim__richtexteditor-mbtn {
background-color: #4f4c4f;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-menubar button.gcim__richtexteditor-mbtn:hover {
border-color: #0A0A0A;
color: white;
background-color: #0A0A0A;
}
/* menu hover */
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list {
background-color: #0A0A0A;
}
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list div.gcim__richtexteditor-collection__item.gcim__richtexteditor-collection__item--active,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item.gcim__richtexteditor-collection__item--enabled {
background-color: #5c5c5c82;
}
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item-label,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection.gcim__richtexteditor-collection--list .gcim__richtexteditor-collection__item-accessory {
color: #d9d9d9;
}
/* toobar style */
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar-overlord {
background-color: gray;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor-editor-header .gcim__richtexteditor-toolbar__primary,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__overflow[role="group"],
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor-editor-header > .gcim__richtexteditor-toolbar {
background-color: #333333;
}
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__overflow[role="group"] .gcim__richtexteditor-tbtn__select-label {
color: white;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn .gcim__richtexteditor-icon div.new-document {
background-image: url("https://www.grapecity.com/favicon/favicon-32x32.png");
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn,
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn:focus,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group .gcim__richtexteditor-tbtn:focus {
background-color: #212121;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group button.gcim__richtexteditor-tbtn:hover,
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-toolbar__group span.gcim__richtexteditor-tbtn:hover,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group button.gcim__richtexteditor-tbtn:hover,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-toolbar__group span.gcim__richtexteditor-tbtn:hover {
border-color: #5b5b5b;
background-color: #0A0A0A;
}
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor .gcim__richtexteditor-editor-container [role="toolbar"].gcim__richtexteditor-toolbar__group {
border-color: gray;
}
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"].gcim__richtexteditor div.gcim__richtexteditor-toolbar__overflow {
box-shadow: 0 0 2px 0 rgb(32 110 201), 0 4px 8px 0 rgb(96 96 96);
}
/* edit area */
[gcim-control-appearance="modern"] .changeStyle .gcim__richtexteditor iframe.gcim__richtexteditor-edit-area__iframe {
background-color: #333333;
}
/* color picker */
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-swatches-menu.gcim__richtexteditor-selected-menu,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-menu.gcim__richtexteditor-collection .gcim__richtexteditor-swatches-menu {
background-color: #4a4949;
}
/* dialoug */
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-dialog__header,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-dialog__footer,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-textfield,
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-dialog .gcim__richtexteditor-textfield:focus {
background-color: #333333;
color: white;
}
/* context toolbar */
[gcim-control-appearance="modern"] [gcim__richtexteditor-original_id="gcRichTextEditor2"] .gcim__richtexteditor-pop .gcim__richtexteditor-pop__dialog {
border-color: gray;
background-color: #333333;
}
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'
},
}
});
