Wordpress Gutenberg RichText FormatType 不带 tagName 换行
我试图在 WordPress 上的古腾堡工具栏中添加一个自定义按钮,以在所选元素上应用类,但我所能做的就是用我的类的标签包装所选文本。
示例:
<ul>
<li>Line 1</li>
<li>Line 2</li>
</ul>
我想要的是,如果我选择第 2 行,我的类将应用于 li 元素,而不是用 span 或其他内容与类一起包裹。如果我只是将光标放在该行上而不选择所有行,那么它也适用,那就太好了。
到目前为止我的代码是这样的:
const { registerFormatType } = wp.richText;
const { RichTextToolbarButton, RichTextShortcut } = wp.editor;
( function( wp ) {
var CustomButton = ({ isActive, onChange, value }) => {
return wp.element.createElement(
wp.blockEditor.RichTextToolbarButton, {
icon: 'image-flip-horizontal',
title: 'Custom Button',
onClick: () => {
onChange( wp.richText.toggleFormat(value, { type: 'robot/button' }));
},
isActive: isActive,
}
);
}
wp.richText.registerFormatType(
'robot/button', {
title: 'Custom button',
tagName: 'span',
className: 'myClass',
edit: CustomButton,
}
);
} )( window.wp );
有简单的方法吗?我可以在tinyMCE 中使用“wrapper => false”选项来完成此操作。
谢谢
I'm trying to add a custom button in my gutemberg toolbar on Wordpress to apply a class on selected element, but all I can do is to wrap selected text with a tag with my class.
Exemple:
<ul>
<li>Line 1</li>
<li>Line 2</li>
</ul>
What I want is if I select line 2 is that my class is applied to the li element, not wrapped with a span or something else with the class. Would be great that it applies also if I just set my cursor on the line without selecting all the line.
My code so far is this :
const { registerFormatType } = wp.richText;
const { RichTextToolbarButton, RichTextShortcut } = wp.editor;
( function( wp ) {
var CustomButton = ({ isActive, onChange, value }) => {
return wp.element.createElement(
wp.blockEditor.RichTextToolbarButton, {
icon: 'image-flip-horizontal',
title: 'Custom Button',
onClick: () => {
onChange( wp.richText.toggleFormat(value, { type: 'robot/button' }));
},
isActive: isActive,
}
);
}
wp.richText.registerFormatType(
'robot/button', {
title: 'Custom button',
tagName: 'span',
className: 'myClass',
edit: CustomButton,
}
);
} )( window.wp );
Is there an easy way to do it ? I can do it in tinyMCE with "wrapper => false" option.
Thank you
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论