概要

リッチテキストエディタ(GcRichTextEditor)コントロールは、WYSIWYGライクなエディタを提供するコントロールです。 メニューバー、ツールバー、ショートカットなど用途に応じた任意のメニュー項目を設定することができます。

このサンプルでは、あらかじめ設定したいコンテンツをHTMLファイル内に指定しています。

説明
app.vue
index.html
styles.css

GcRichTextEditorはそれぞれ次のファイルからインポートします。

  • モジュールファイル:@mescius/inputman.richtexteditor
  • CSSファイル:@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css

初期化を行う場合は、textarea要素に対してコントロールをホストするようにしてください。

<textarea id="gcRichTextEditor"></textarea>
import { InputMan } from '@mescius/inputman.richtexteditor';
import '@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css';
const gcRichTextEditor = new InputMan.GcRichTextEditor(document.getElementById('gcRichTextEditor1'), {
});
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);