是否有任何方法可以防止CKEditor5修改内联样式标签上的编程插入的Div?

Question

我有一个生成div内容的应用程序，必须自动插入到ckeditor实例中。目前，我使用editorInstance.model.insertContent( modelFragment );，并有如下自定义插件来处理这些元素的插入:

// Allow <div> elements in the model.
editor.model.schema.register( 'div', {
allowWhere: '$block',
allowContentOf: '$root',
inheritAllFrom: '$block',
allowAttributes: [ 'style' ]
} );
// Allow <div> elements in the model to have all attributes.
editor.model.schema.addAttributeCheck( context => {
if ( context.endsWith( 'div' ) ) {
return true;
}
} );
// The view-to-model converter converting a view <div> with all its attributes to the model.
editor.conversion.for( 'upcast' ).elementToElement( {
view: 'div',
model: ( viewElement, { writer: modelWriter } ) => {
return modelWriter.createElement( 'div', viewElement.getAttributes() );
}
} );
// The model-to-view converter for the <div> element (attributes are converted separately).
editor.conversion.for( 'downcast' ).elementToElement( {
model: 'div',
view: 'div'
} );
// The model-to-view converter for <div> attributes.
// Note that a lower-level, event-based API is used here.
editor.conversion.for( 'downcast' ).add( dispatcher => {
dispatcher.on( 'attribute', ( evt, data, conversionApi ) => {
// Convert <div> attributes only.
if ( data.item.name != 'div' ) {
return;
}
const viewWriter = conversionApi.writer;
const viewDiv = conversionApi.mapper.toViewElement( data.item );
// In the model-to-view conversion we convert changes.
// An attribute can be added or removed or changed.
// The below code handles all 3 cases.
if ( data.attributeNewValue ) {
viewWriter.setAttribute( data.attributeKey, data.attributeNewValue, viewDiv );
} else {
viewWriter.removeAttribute( data.attributeKey, viewDiv );
}
} );
} );
}

但是，我插入的一些DIV元素具有自定义style标记。对于"基本"的东西，如背景图像，背景颜色，这工作OK，但当我试图插入一个div与background: linear-gradient(......似乎剥离整个样式标签空。这些元素是动态生成的，所以除了内联，我不能用其他方式对它们进行样式化。

是否可以强制CKEditor5不解析div上的样式标签，或者允许background: linear-gradient(...?

Answer 1

我也有类似的需求，所以我能够通过这段代码实现一些东西

在这里我创建了一个我想使用的自定义样式列表，所以我使用了上行和下行调度器

const allowedStyles = {
'lineHeight': 'line-height',
}
schema.extend( modelName, {
allowAttributes: [...Object.keys( allowedStyles )]
} )
editor.data.upcastDispatcher.on(
"element",
(evt, data, conversionApi) => {
for (const [modelStyle, viewStyle] of Object.entries(allowedStyles)) {
const styleValue =
data.viewItem.getNormalizedStyle(viewStyle)
//if range is null
if (!data.modelRange) {
return;
}
for (const item of data.modelRange.getItems({ shallow: true })) {
if (schema.checkAttribute(item, modelStyle)) {
conversionApi.writer.setAttribute(modelStyle, styleValue, item);
}
}
}
},
{
priority: "low",
}
);
for (const [modelAttribute, viewStyle] of Object.entries(allowedStyles)) {
conversion.for("downcast").add((dispatcher) =>
dispatcher.on(`attribute:${modelAttribute}`, (evt, data, conversionApi) => {
const {
item,
attributeNewValue,
} = data;
//if item name is not defined
if (!item.name) {
return;
}
const {
mapper,
writer,
} = conversionApi;
// if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
//  return;
// }
const div = mapper.toViewElement(item);
if (attributeNewValue) {
writer.setStyle(viewStyle, attributeNewValue, div);
} else {
writer.removeStyle(viewStyle, div);
}
})
);
}