リッチテキストエディタ（GcRichTextEditor）コントロールは、マークダウン形式での編集やプレビューが可能です。
マークダウン
Markdownプラグインを利用することで、軽量マークアップ言語マークダウンを使用してテキストを入力することができます。
この機能を有効にするには、pluginsプロパティにGcRichTextEditorPluginItem.Markdownの値を設定してください。
有効な機能
Markdownプラグイン利用時は一部機能に制限があります。利用できる主な機能は以下の通りです。
ツールバー項目
メニュー項目
GcRichTextEditorToolbarItem.AcceptsTab
GcRichTextEditorMenuItem.AcceptsTab
GcRichTextEditorToolbarItem.BlockQuote
GcRichTextEditorMenuItem.BlockQuote
GcRichTextEditorToolbarItem.Bold
GcRichTextEditorMenuItem.Bold
GcRichTextEditorToolbarItem.BulList
GcRichTextEditorMenuItem.BulList
GcRichTextEditorToolbarItem.CharMap
GcRichTextEditorMenuItem.CharMap
GcRichTextEditorToolbarItem.Copy
GcRichTextEditorMenuItem.Copy
GcRichTextEditorToolbarItem.Cut
GcRichTextEditorMenuItem.Cut
GcRichTextEditorToolbarItem.Emoticons
GcRichTextEditorMenuItem.Emoticons
GcRichTextEditorToolbarItem.FullScreen
GcRichTextEditorMenuItem.FullScreen
GcRichTextEditorToolbarItem.H1
GcRichTextEditorMenuItem.H1
GcRichTextEditorToolbarItem.H2
GcRichTextEditorMenuItem.H2
GcRichTextEditorToolbarItem.H3
GcRichTextEditorMenuItem.H3
GcRichTextEditorToolbarItem.H4
GcRichTextEditorMenuItem.H4
GcRichTextEditorToolbarItem.H5
GcRichTextEditorMenuItem.H5
GcRichTextEditorToolbarItem.H6
GcRichTextEditorMenuItem.H6
GcRichTextEditorToolbarItem.HorizontalRule
GcRichTextEditorMenuItem.HorizontalRule
GcRichTextEditorToolbarItem.Image
GcRichTextEditorMenuItem.Image
GcRichTextEditorToolbarItem.Italic
GcRichTextEditorMenuItem.Italic
GcRichTextEditorToolbarItem.Link
GcRichTextEditorMenuItem.Link
GcRichTextEditorToolbarItem.NewDocument
GcRichTextEditorMenuItem.NewDocument
GcRichTextEditorToolbarItem.NumList
GcRichTextEditorMenuItem.NumList
GcRichTextEditorToolbarItem.Paste
GcRichTextEditorMenuItem.Paste
GcRichTextEditorToolbarItem.Preview
GcRichTextEditorMenuItem.Preview
GcRichTextEditorToolbarItem.Print
GcRichTextEditorMenuItem.Print
GcRichTextEditorToolbarItem.Remove
GcRichTextEditorMenuItem.Remove
GcRichTextEditorToolbarItem.SelectAll
GcRichTextEditorMenuItem.SelectAll
GcRichTextEditorToolbarItem.Strikethrough
GcRichTextEditorMenuItem.Strikethrough
GcRichTextEditorToolbarItem.Table
GcRichTextEditorMenuItem.Table
GcRichTextEditorToolbarItem.WordCount
GcRichTextEditorMenuItem.WordCount
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import { InputMan } from "@mescius/inputman.richtexteditor";
import "@mescius/inputman.richtexteditor/JS/plugins/all";
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcRichTextEditor = new InputMan.GcRichTextEditor(
document.getElementById("gcRichTextEditor"),
{
plugins: [
InputMan.GcRichTextEditorPluginItem.Markdown,
InputMan.GcRichTextEditorPluginItem.Preview,
],
toolbar: [
InputMan.GcRichTextEditorToolbarItem.Preview,
],
editorMode: InputMan.GcRichTextEditorMode.Markdown,
previewMode: InputMan.PreviewMode.Inside,
previewState: true,
statusbar: true,
height: 600
}
);
<!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>
<textarea id="gcRichTextEditor">
## GcRichTextEditorのマークダウンプラグイン
リッチテキストエディタにマークダウン機能を追加しました。このサンプルではマークダウンを使用してテキストを入力する方法を示します。
### マークダウン機能の紹介
マークダウンは、テキストを簡潔に記述するための軽量マークアップ言語です。リッチテキストエディタでは、マークダウンを使用してテキストを入力することができます。
ここでは記述例を紹介します。
#### 見出し
見出しは、`#`を使って作成します。
#### 箇条書きリスト
箇条書きリストは、`-`を使って作成します。
- 番号付きリスト
- 2つめの項目
#### リンク
リンクは、以下の形式で作成します。
[リンクの例](https://demo.mescius.jp/inputmanjs/demos/richTextEditor/language/purejs)
#### プレビュー
`previewMode`プロパティを`PreviewMode.Inside`に設定することで、エディタの右側にプレビューを表示することができます。
#### ステータスバー
ステータスバーには、現在の編集形式を表示しています。`MarkDown`と表示される場合はマークダウンが有効になっています。
</textarea>
</body>
</html>
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.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/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',
'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'
},
}
});
