React使用CKEditor5出现widget toolbar no items(mediaEmbed)警告如何解决

问题根因 #

你引入了MediaEmbed插件但没有配置媒体部件选中时的工具栏，触发了CKEditor的配置校验，所以抛出该警告。

解决方案 #

方案1：配置媒体嵌入工具栏（推荐，适用于需要媒体编辑功能的场景） #

在现有配置中新增mediaEmbed配置项，指定工具栏内容，修改后的完整代码如下：

export const EditorField = (props) => {

    const {name,method,placeholder,isSimplified} = props

    const link = {
        decorators: {
            toggleDownloadable: {
                mode: 'manual',
                label: 'Downloadable',
                attributes: {
                    download: 'file'
                }
            },
            openInNewTab: {
                mode: 'manual',
                label: 'Open in a new tab',
                defaultValue: true,
                attributes: {
                    target: '_blank',
                    rel: 'noopener noreferrer'
                }
            }
        }
    }
    const image = {
        toolbar: [
            'imageTextAlternative',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage'
        ]
    }
    const table = {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells',
            'tableCellProperties',
            'tableProperties'
        ]
    }
    // 新增mediaEmbed配置
    const mediaEmbed = {
        toolbar: ['link', '|', 'removeMedia']
    }
    const toolbar = isSimplified ? {
        items: [
            'bold','italic','underline','strikethrough','|',
            'link','|',
            'specialCharacters','|',
            'undo','redo'
        ], shouldNotGroupWhenFull: true
    } : {
        items: [
            'heading','|',
            'bold','italic','underline','strikethrough','|',
            'fontColor','fontBackgroundColor','|',
            'bulletedList','numberedList','|',
            'link','imageUpload','insertTable','mediaEmbed','|',
            'specialCharacters','blockQuote','horizontalLine','|',
            'undo','redo'
        ], shouldNotGroupWhenFull: true
    }

    return (
        <CKEditor
            config={ {
                toolbar,
                language: 'it',
                placeholder,
                link,
                image,
                table,
                mediaEmbed, // 注入新增的配置
            } }
            editor={ Editor }
            data={request[name] || ''}
            onChange={ (event, editor) => {
                const data = editor.getData()
                dispatch(setValue({method,name,value:data}))
            } }
        />
    )
}

如果不需要媒体选中时显示任何工具栏，直接把mediaEmbed.toolbar设为空数组即可。

方案2：简化模式下移除MediaEmbed插件（适用于精简版不需要媒体嵌入功能的场景） #

你当前代码中精简模式的主工具栏没有媒体嵌入入口，不需要使用该功能的话可以直接在精简模式下移除插件，也能消除警告：

<CKEditor
    config={ {
        toolbar,
        language: 'it',
        placeholder,
        link,
        image,
        table,
        // 新增该行配置
        removePlugins: isSimplified ? ['MediaEmbed'] : []
    } }
    // 其余代码保持不变
/>

内容的提问来源于stack exchange，提问作者albertovalerio