微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 CKEditor5 中记录 editorData 时缺少样式属性

如何解决在 CKEditor5 中记录 editorData 时缺少样式属性

所以我试图向通过单击自定义构建中的自定义按钮(插件生成的 div 添加额外的样式属性 看起来像这样

document.getElementsByClassName("image-inside")[length - 1]
        .setAttribute("style",`background-image: ${url};width: ${width};height: ${height}`)

但是当我记录 editorData 时,只显示了类。不是风格

<div class="my-custom-Box"><div class="image-inside">&nbsp;</div><div class="text-caption"><p>&nbsp;</p></div></div>

我的自定义构建

schema.register('contentimage',{
            isLimit: true,isBlock: true,isObject: true,allowIn: 'simpleBtn',allowAtrributes: 'style',allowContentOf: '$block'
})
conversion.for('upcast').elementtoElement( {
            model: 'contentimage',view: {
                name: 'div',classes: 'image-inside'
            }
 } )
conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( `attribute:style:contentimage`,( evt,data,conversionApi ) => {
        const viewElement = conversionApi.mapper.toViewElement( data.item );
                console.log('hellooooo')
        conversionApi.writer.setAttribute( 'style',data.attributeNewValue,viewElement );
     );
} );
conversion.for('dataDowncast').elementtoElement( {
            model: 'contentimage',classes: 'image-inside'
            }
} )
conversion.for( 'editingDowncast' ).elementtoElement( {
            model: 'contentimage',view: ( modelElement,{ writer: viewWriter } ) => {
                const section = viewWriter.createAttributeElement
                ( 'div',{ class: 'image-inside',style: "background-size: cover; background-repeat: no-repeat; background-position: center center"});
                return toWidgetEditable( section,viewWriter);
            }
        } )

任何帮助将不胜感激。感谢阅读

更新: 我确实能够在类旁边添加样式,但我仍然不知道如何从 HTML 中获取值,

function renderDowncastElement( styleAttr ) {
            console.log('cac ',styleAttr)
            return ( modelattributeValue,{ writer } ) => writer.createAttributeElement( 'div',{
                style: `background-image:${ modelattributeValue }; 
                        width:${'100px'}
                        height:${'100px'}`,classes: 'image-inside'
            },{ priority: 7 } );
 }
<div class="my-custom-Box"><div style="background-image:[object Object];width:100px
                       height:100px;" classes="image-inside"></div><div class="text-caption"><p>&nbsp;</p></div></div>

当我注销它仍然 [object Object] 如上所述 反正这里有调试吗?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。