「block-editor-vue」は段落、見出し、リスト、その他などのブロック要素を自由な組み合わせで積み上げ可能なブロックエディタです。
コンテンツの編集を行う場合、CKEditorやTinyMCEなどのWYSIWYGエディタを使用すると自由度は高いですが、要素の移動などが直感的に出来なかったり、要素を削除したときにゴミのマークアップが残ったりするなど、操作に慣れが必要です。
また、CMSの管理画面などを第三者に開示する場合、ページ内で使用できるマークアップの種類を限りたいなどの制限が必要な場合があります(例えば、大見出し、小見出しと本文のみ許可したいが、テーブルは不許可にしたい、など)。
そこで、なるべく操作は簡単で、使用する要素の制限をプログラマブルに設定可能な、HTMLマークアップ編集のためのツールを制作しました。
npm install
npm run build
<script src="block-editor-vue.js"></script>
<input name="content" id="editor" type="hidden" value="(Escaped HTML markup)">
valueに対して設定されたHTMLマークアップデータをエディタが受け取り、初期表示を行います。HTMLマークアップデータは、種類ごとに決められた構造になっている必要があります。 ※この機能を利用するには、"loadItemsFromInputTag" オプションを true にしてください。
<div id="editor"></div>
new BlockEditor('#editor');
オプションを設定する場合
new BlockEditor('#editor', {rootClass: 've'});
new BlockEditor(<element selector>, <options>);
Common以外のオプションは、各セクション名をキーに持つオブジェクトを指定して下さい。
例
new BlockEditor('#editor', {
// Common options
rootClass: 've',
// Paragraph options
Paragraph: {
defaultImageAlign: 'right'
}
});
- Common
- rootClass
- baseFontSize
- loadItemsFromInputTag
- allowStyledText
- styledTextClasses
- allowCssClass
- cssClasses
- enabledItemNames
- itemOrder
- enabledItemNamesInColumn
- setAsHtmlIfNotMatched
- items
- allowImages
- imageExtensions
- maxImages
- allowFileBrowser
- allowHistories
- historyMax
- historyMinInterval
- historyMaxWait
- outputNewLine
- outputIndent
- locale
- Paragraph
- Heading
- List
- Table
- Column
- Html
- Events
- プリセットについて
生成されるHTMLの全要素を内包する、ルート要素のCSSクラス名。
デフォルトではHTMLは下記のようなマークアップになります。
<div class="ve">...(内包する要素のHTML)...</div>
type: string
default: 've'
エディタの表示の基準となるフォントサイズ(px)
type: integer
default: 16
エディタの起動時に、ブロック要素の構成をinputタグから読み込むかどうか。
他ページからHTMLマークアップをPOSTして、エディタで編集を行いたい場合に使用します。
trueにした場合、例えば下記のようなinputをエディタの起点として指定すると、見出し、段落が初期状態として読み込まれます。
<input type="hidden" value="<h3>見出し</h3>
<div class="paragraph-wrap">段落のテキスト</div>">
type: boolean
default: true
各ブロック要素内で、インラインスタイル付きのテキスト編集を許可するかどうか
trueにした場合、"styledTextClasses"オプションでインラインスタイルのCSSクラスを指定できます。
type: boolean
default: false
インラインスタイルとしてテキストに適用するCSSクラス名。
クラス名にはprefixとして’ve-‘がつけられます。
"link"のみ予約語で、テキストに対してリンクを設定することができます。
※ このオプションを使用するには、allowStyledText=true である必要があります。
type: array
default: ['link']
styledTextClasses: [
'link', // allow link tag (reserved word)
'bold', // css class name is 've-bold'
{red: 'display name of "red"'}, // css class name is 've-red' and displayed 'red' on style toolbar.
]
各ブロック要素に対して、CSSクラス名の指定を許可するかどうか
trueにした場合、"cssClasses"オプションで選択可能なCSSクラスを指定できます。
type: boolean
default: true
ブロック要素に対して適用するCSSクラス名のリスト
nullを設定した場合は、選択式ではなく自由入力が可能。
type: array
default: null
cssClasses: [
'class1', // class="class1"
'class2', // class="class2"
{class3: 'Class name 3'} // class="class3" displayed "Class name 3" on editor
]
エディタで使用可能なブロック要素の種類
nullを指定した場合、全ての種類が使用可能。
type: array
default: null
options: 'Paragraph', 'Heading', List, 'Table', 'Column', 'Html'
// only 'Paragraph' and 'Heading' are supported
enabledItemNames: ['Paragraph', 'Heading']
追加メニュー上の、ブロック要素の表示順
type: array
default: ['Paragraph', 'Heading', 'List', 'Table', 'Column', 'Html']
options: 'Paragraph', 'Heading', List, 'Table', 'Column', 'Html'
カラム要素内で使用可能なブロック要素の種類
nullを指定した場合、全ての種類が使用可能。
type: array
default: null
options: 'Paragraph', 'Heading', List, 'Table', 'Html'
inputからブロック要素の構成を読み込む場合(loadItemsFromInputTag=true時)に、どの要素にもマッチしなかった場合に、その要素をHTML要素として扱うかどうか。
type: boolean
default: true
エディタ起動時に初期構成として読み込む、ブロック要素の構成データ
type: object
default: null
ブロック要素上で画像の添付を許可するかどうか(現時点ではParagraphのみ対応)
type: boolean
default: true
添付を許可する画像の拡張子のリスト(allowImages=true時)
type: array
default: ['jpg', 'jpeg', 'jpe', 'gif', 'png']
一つの要素内で添付可能な最大画像数
type: integer
default: 5
画像の外部アップローダの使用を許可するかどうか
trueの場合、別途FileBrowserオプションの設定が必要。
type: boolean
default: false
エディタ上の操作の履歴保持(Undo / Redo)を許可するかどうか
type: boolean
default: true
保持する操作履歴のステップ数
type: integer
default: 50
操作履歴について、前回の変更から指定以下の時間操作が連続する場合は履歴登録をスキップする(msec)。
(文字入力など短時間で多くの操作ステップが発生したときに、ステップ数が細かくなり過ぎるのを防ぐため)
type: integer
default: 300
操作履歴について、連続した操作が続いても、起点の操作から指定の時間を超える場合は履歴登録を行う。(msec) (文字入力など、継続して文字を入力していても、ある程度の時間が経過すると履歴としてステップを登録するために使用。
type: integer
default: 1000
notice: historyMinInterval < historyMaxWait
HTMLマークアップ出力時に使用する改行コード
type: string
default: "\n"
HTMLマークアップ出力時に使用するインデントの文字
type: string
default: "\t"
エディタの表示に使用する翻訳ロケール名
type: string
default: 'en'
options: 'en', 'ja'
画像に設定する文字の回り込み設定
type: string
default: 'left'
options: 'left', 'center', 'right'
ブロック要素を識別するHTMLマークアップ上のタグ名
type: string
default: 'div'
ブロック要素を識別するHTMLマークアップ上のタグのCSSクラス名
type: string
default: 'paragraph-wrap'
tagName='div', tagClassName='paragraph-wrap'の場合、下記のようなマークアップになります。
<div class="paragraph-wrap">...(contents in Paragraph)...</div>
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用される。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
見出しレベルのリスト
type: array
default: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
デフォルトの見出しレベル
type: string
default: 'h3'
options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
見出しレベルごとに設定する表示名
nullが設定されると、見出しレベルの設定を大文字に変換したものがそのまま使用されます。(例:H3)
type: object
default: null
levelNames: {
h2: 'extra-big heading',
h3: 'big heading',
h4: 'middle heading',
h5: 'small heading',
h6: 'extra-small heading'
}
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用されます。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
リストの種類の定義リスト
type: array
default: ['ordered', 'unordered']
options: 'ordered', 'unordered'
デフォルトのリストの種類
type: string
default: 'unordered'
options: 'ordered', 'unordered'
リストに追加できる最大行数
type: integer
default: 50
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用されます。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
テーブルに追加できる最大行数
type: integer
default: 50
テーブルに追加できる最小行数
type: integer
default: 1
デフォルトの行数
type: integer
default: 2
テーブルに追加できる最大列数
type: integer
default: 10
テーブルに追加できる最小列数
type: integer
default: 2
デフォルトの列数
type: integer
default: 2
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用されます。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
カラム数の変更を許可するかどうか
type: boolean
default: true
適用可能な最大カラム数
type: integer
default: 4
適用可能な最小カラム数
type: integer
default: 2
デフォルトのカラム数
type: integer
default: 2
ブロック要素を識別するHTMLマークアップ上のタグ名
type: string
default: 'div'
ブロック要素を識別するHTMLマークアップ上のタグのCSSクラス名
type: string
default: 'column-wrap'
ブロック要素内のカラム要素を識別するHTMLマークアップ上のタグ名
type: string
default: 'div'
ブロック要素内のカラム要素を識別するHTMLマークアップ上のタグのCSSクラス名
type: string
default: 'column-item'
tagName: 'div', tagClassName: 'column-wrap', columnTagName: 'div', columnTagClassName: 'column-item'の場合、下記のようなマークアップになります。
<div class="column-wrap">
<div class="column-item">...(contents of column)...</div>
<div class="column-item">...(contents of column)...</div>
<div class="column-item">...(contents of column)...</div>
</div>
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用される。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
ブロック要素を識別するHTMLマークアップ上のタグ名
type: string
default: 'div'
ブロック要素を識別するHTMLマークアップ上のタグのCSSクラス名
type: string
default: 'html-wrap'
tagName: 'div', tagClassName: 'html-wrap'の場合、下記のようなマークアップになります。
<div class="html-wrap">...(contents in Html)...</div>
ブロック要素の表示名
nullが設定されると、翻訳データに基づいた名称が使用される。
type: string
default: null
CSSクラス名、その他の要素を固定して組み合わせた、プリセットのリスト
プリセットの詳細はこちらを参照
type: array
default: null
ファイルブラウザのフロントエンドURL
(iframeとして表示されます)
実際にファイル選択の連携を行う場合、ファイルブラウザ側で設定およびコードを実装する必要があります。
type: string
default: null
ファイルブラウザの表示幅
数値で指定した場合は%、その他は設定値がそのまま使用されます。
type: integer or string
default: null
ファイルブラウザの表示高さ
数値で指定した場合は%、その他は設定値がそのまま使用されます。
type: integer or string
default: null
エディタの起動が完了したときに呼ばれるコールバック関数
html: エディタの起動時に設定されているHTMLマークアップデータ
onLoad: function (html) {
//...(some sort of processing)...
}
エディタ上で操作が行われた際に呼び出されるコールバック関数
html: 現在のHTMLマークアップデータ
onUpdate: function (html) {
//...(some sort of processing)...
}
各ブロック要素について、CSSクラスやその他の属性をあらかじめ固定としたプリセットを定義可能です。
例えば、見出しにおいて、<h3 class="title">
というHTMLマークアップが必要であれば、Heading要素の設定は下記のようになります。
Heading: {
presets: [
{level: 'h3', className: 'title', dispName: '見出しタイトル'}
]
}
各ブロック要素ごとに、使用可能な属性は下記の通りです。
CSSクラス名
type: string
default: null
画像に対する、テキストの回り込み指定
type: string
default: "Paragraph.defaultImageAlign"の値
options: 'left', 'center', 'right'
CSSクラス名
type: string
default: null
見出しの深さ
type: string
default: "Heading.defaultLevel"の値
options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
CSSクラス名
type: string
default: null
リストの種類
type: string
default: "List.defaultType"の値
options: 'unordered', 'ordered'
CSSクラス名
type: string
default: null
CSSクラス名
type: string
default: null
CSSクラス名
type: string
default: null
- Google Chrome
- Firefox
- Safari