问题描述
所以我试图向通过单击自定义构建中的自定义按钮(插件)生成的 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"> </div><div class="text-caption"><p> </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> </p></div></div>
当我注销它仍然 [object Object] 如上所述 反正这里有调试吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)