見様見真似で作ってみました。
my-snow-monkey.phpに記述
// ブロックエディター用の JS 読み込み
add_action(
'enqueue_block_editor_assets',
function () {
wp_enqueue_script(
'my_editor',
MY_SNOW_MONKEY_URL . '/js/editor.js',
[
'wp-element',
'wp-rich-text',
'wp-editor'
],
filemtime( MY_SNOW_MONKEY_PATH . '/js/editor.js' ),
true
);
}
);
jsに記述
(function (richText, element, editor) {
richText.registerFormatType('my-editor/editor01', {
title: '折り返しを制限',
tagName: 'span',
className: 'inline-block',
edit: function (args) {
return element.createElement(wp.blockEditor.RichTextToolbarButton, {
icon: 'admin-customizer',
title: '折り返しを制限',
onClick: function () {
args.onChange(richText.toggleFormat(args.value, {
type: 'my-editor/editor01'
}));
},
isActive: args.isActive,
});
},
}),
richText.registerFormatType('my-editor/editor02', {
title: 'カスタムspan',
tagName: 'span',
className: 'custom-span',
edit: function (args) {
return element.createElement(wp.blockEditor.RichTextToolbarButton, {
icon: 'editor-code',
title: 'カスタムspan',
onClick: function () {
args.onChange(richText.toggleFormat(args.value, {
type: 'my-editor/editor02'
}));
},
isActive: args.isActive,
});
},
})
}(
window.wp.richText,
window.wp.element,
window.wp.editor
));
一応動いてはいるようですが、ハンドブックを見ても前提が多く難しいので、他の記事を見ながら作成しました。
依存関係なども曖昧なのですが、wp-rich-textのみで良かったりしますかね？
もし可能であれば、ご教示いただければ幸いです。
いいねをした人: 居ません
