我已经正确注册了一个Gutenberg块，它由一个textarea控件组成，用于存储帖子的元数据。在过去，我只是wp_editor 在edit-form-advanced 具有完整TinyMCE编辑功能并将textarea html存储在transition_post_status 钩
在Gutenberg环境中，使用TextareaControl组件，如何将完整的编辑功能引入textarea控件？我的基本设置只显示要输入控件的纯文本。我想我可以手工编写html，但似乎我应该能够使用编辑工具栏来实现这一点。
我应该补充一点，我正在寻找完整的TinyMCE编辑，包括有序/无序列表。预格式化工具栏功能不足。
编辑：这是我用来渲染古腾堡块的js。非常基本。
( function( wp ) {
var el = wp.element.createElement;
var registerBlockType = wp.blocks.registerBlockType;
var TextareaControl = wp.components.TextareaControl;
var RichText = wp.editor.RichText;
var AlignmentToolbar = wp.editor.AlignmentToolbar;
registerBlockType( \'my-gutenberg/my-block\', {
title: \'The title\',
icon: \'email-alt\',
category: \'common\',
keywords: [\'email\'],
attributes: {
blockValue: {
type: \'string\',
source: \'meta\',
meta: \'the_meta\'
}
},
edit: function( props ) {
var className = props.className;
var setAttributes = props.setAttributes;
function updateBlockValue( blockValue ) {
setAttributes({ blockValue });
}
return el(
\'div\',
{ className: className },
el( TextareaControl, {
label: \'The label\',
value: props.attributes.blockValue,
onChange: updateBlockValue
} )
);
},
// No information saved to the block
// Data is saved to post meta via attributes
save: function() {
return null;
}
} );
} )( window.wp );
最合适的回答,由SO网友:Sally CJ 整理而成
以下是实现您想要的目标的简单方法：
从edit 回调，返回class 扩展了ClassicEdit component 与经典编辑器块一起使用。在你的街区attributes, 确保content 已设置（在问题中blockValue). 经过测试，工作正常：
var el = wp.element.createElement;
var ClassicEdit; // An instance of the private ClassicEdit class.
wp.blocks.registerBlockType( \'my-gutenberg/my-block\', {
attributes: {
content: {
type: \'string\',
source: \'meta\',
meta: \'the_meta\'
}
},
edit: function( props ) {
if ( ! ClassicEdit ) {
var block = wp.blocks.getBlockType( \'core/freeform\' );
ClassicEdit = ( class extends block.edit {
componentDidMount() {
// Call the parent method to setup TinyMCE, etc.
block.edit.prototype.componentDidMount.call( this );
// Change the toolbar\'s title - to your block\'s.
jQuery( \'#toolbar-\' + this.props.clientId )
.attr( \'data-placeholder\', \'My Title\' );
}
} );
}
return el( ClassicEdit, props );
},
save: function( props ) {
},
...
} );
但你会想
copy these CSS 并确保更换
my-guternberg/my-block 具有正确的块名称。
对于高级编码，您可以复制the component file, 任意编辑它，并将其用于块的edit 选项（&M）；edit: MyClassicEdit.
和here\'s the code 我曾经做过测试。
预览
