GcRichTextEditorはそれぞれ次のファイルからインポートします。
モジュールファイル:@mescius/inputman.richtexteditor
CSSファイル:@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css
初期化を行う場合は、textarea要素に対してコントロールをホストするようにしてください。
<template>
<div>
<GcRichTextEditorComponent
:baseUrl="baseUrl"
:plugins="plugins"
:toolbar="toolbar"
:height="500"
>
<h1>GcRichTextEditorデモのへようこそ</h1>
<p>このサンプルではGcRichTextEditorコントロールの簡単な説明を行います。</p>
<h1>GcRichTextEditorの機能</h1>
<p>
GcRichTextEditorでは文字書式の設定、テーブル挿入、箇条書きや段落番号の挿入などの一般的なWYSIWYGの機能に加えて便利な機能を搭載しています。
</p>
<p>ここではその一例を紹介します。</p>
<h3>表示言語の変更</h3>
<p>
コントロール内のメニューやラベルなどの表示言語を切り替えることができます。現在は、次の言語の切り替えをサポートしています。
</p>
<ul style="list-style-type: circle">
<li>日本語</li>
<li>英語</li>
</ul>
<p>日本語表示モードのイメージは以下の通りです。</p>
<p><img :src="langJApng" alt="" width="680" height="363" /></p>
<p>英語表示モードのイメージは以下の通りです。</p>
<p><img :src="langENpng" alt="" width="680" height="363" /></p>
<p>
より詳細な動作については、<a
href="$IMDEMOROOT$/richTextEditor/language/purejs"
target="_blank"
rel="noopener"
>デモページ</a
>から確認することができます。
</p>
<h2>GcRichTextEditor利用時の注意点</h2>
<p>
GcRichTextEditorコントロールは<strong>@mescius/inputman.richtexteditor</strong>モジュールからインポートすることができます。CSSファイルは<strong>gc.inputman.richtexteditor.css</strong>からインポートします。InputManJSにはその他のコントロールが定義してある、<strong>@mescius/inputman</strong>モジュールも存在します。お間違いの無いようご注意ください。
</p>
</GcRichTextEditorComponent>
</div>
</template>
<script setup>
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import "./styles.css";
import { ref } from "vue";
import GC from "@mescius/inputman.richtexteditor";
import { GcRichTextEditorComponent } from "@mescius/inputman.richtexteditor.vue";
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
var langJApng = "$IMDEMOROOT$/ja/images/gcrichtexteditor_langja.png";
var langENpng = "$IMDEMOROOT$/ja/images/gcrichtexteditor_langen.png";
var baseUrl =
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS';
var plugins = [GC.InputMan.GcRichTextEditorPluginItem.All];
var toolbar = [
GC.InputMan.GcRichTextEditorToolbarItem.NewDocument,
GC.InputMan.GcRichTextEditorToolbarItem.RestoreDraft,
GC.InputMan.GcRichTextEditorToolbarItem.Preview,
GC.InputMan.GcRichTextEditorToolbarItem.Print,
GC.InputMan.GcRichTextEditorToolbarItem.Undo,
GC.InputMan.GcRichTextEditorToolbarItem.Redo,
GC.InputMan.GcRichTextEditorToolbarItem.Cut,
GC.InputMan.GcRichTextEditorToolbarItem.Copy,
GC.InputMan.GcRichTextEditorToolbarItem.Paste,
GC.InputMan.GcRichTextEditorToolbarItem.PasteText,
GC.InputMan.GcRichTextEditorToolbarItem.SelectAll,
GC.InputMan.GcRichTextEditorToolbarItem.SearchReplace,
GC.InputMan.GcRichTextEditorToolbarItem.HTMLCode,
GC.InputMan.GcRichTextEditorToolbarItem.FullScreen,
GC.InputMan.GcRichTextEditorToolbarItem.Image,
GC.InputMan.GcRichTextEditorToolbarItem.Link,
GC.InputMan.GcRichTextEditorToolbarItem.Media,
GC.InputMan.GcRichTextEditorToolbarItem.Template,
GC.InputMan.GcRichTextEditorToolbarItem.CharMap,
GC.InputMan.GcRichTextEditorToolbarItem.Emoticons,
GC.InputMan.GcRichTextEditorToolbarItem.HorizontalRule,
GC.InputMan.GcRichTextEditorToolbarItem.PageBreak,
GC.InputMan.GcRichTextEditorToolbarItem.BlockQuote,
GC.InputMan.GcRichTextEditorToolbarItem.Bold,
GC.InputMan.GcRichTextEditorToolbarItem.Italic,
GC.InputMan.GcRichTextEditorToolbarItem.Underline,
GC.InputMan.GcRichTextEditorToolbarItem.Strikethrough,
GC.InputMan.GcRichTextEditorToolbarItem.Superscript,
GC.InputMan.GcRichTextEditorToolbarItem.Subscript,
GC.InputMan.GcRichTextEditorToolbarItem.Styles,
GC.InputMan.GcRichTextEditorToolbarItem.FontFamily,
GC.InputMan.GcRichTextEditorToolbarItem.FontSize,
GC.InputMan.GcRichTextEditorToolbarItem.Align,
GC.InputMan.GcRichTextEditorToolbarItem.LineHeight,
GC.InputMan.GcRichTextEditorToolbarItem.ForeColor,
GC.InputMan.GcRichTextEditorToolbarItem.BackColor,
GC.InputMan.GcRichTextEditorToolbarItem.RemoveFormat,
GC.InputMan.GcRichTextEditorToolbarItem.WordCount,
GC.InputMan.GcRichTextEditorToolbarItem.Table,
GC.InputMan.GcRichTextEditorToolbarItem.LeftToRight,
GC.InputMan.GcRichTextEditorToolbarItem.RightToLeft,
GC.InputMan.GcRichTextEditorToolbarItem.Outdent,
GC.InputMan.GcRichTextEditorToolbarItem.Indent,
GC.InputMan.GcRichTextEditorToolbarItem.BulList,
GC.InputMan.GcRichTextEditorToolbarItem.NumList,
];
</script>
<style src="./styles.css"></style>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>リッチテキストエディタコントロール - 概要</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script src="compiler.js" type="module"></script>
<script>
window.onload = function() {
var System = SystemJS;
System.import("./src/app.js");
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
body {
box-sizing: content-box !important;
height: 551px!important;
}
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
"@mescius/inputman": 'npm:@mescius/inputman/index.js',
"@mescius/inputman.vue": 'npm:@mescius/inputman.vue/lib/gc.inputman.plugin.vue.js',
"@mescius/inputman/CSS": "npm:@mescius/inputman/CSS",
"@mescius/inputman.richtexteditor": "npm:@mescius/inputman.richtexteditor/index.js",
"@mescius/inputman.richtexteditor.vue": "npm:/@mescius/inputman.richtexteditor.vue/lib/gc.inputman.richtexteditor.plugin.vue.js",
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures/wijmo.culture.ja.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);