在CKEditor 5中禁用时更改编辑器背景颜色,可以通过自定义样式来实现。以下是一种可能的解决方案:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// 其他配置项...
// 添加自定义样式
ckfinder: {
options: {
resourceType: 'Images'
},
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
},
// 其他配置项...
// 自定义样式定义
styles: [
{
name: 'Custom Background Color',
element: 'body',
styles: {
'background-color': 'red' // 更改为你想要的背景颜色
}
}
]
} )
.catch( error => {
console.error( error );
} );
在上述代码中,我们通过styles
选项添加了一个自定义样式,将body
元素的背景颜色设置为红色。你可以根据需要修改背景颜色的值。
ClassicEditor
.create( document.querySelector( '#editor' ), {
// 其他配置项...
// 禁用编辑器时应用自定义样式
isReadOnly: true,
contentCss: '/path/to/custom.css' // 替换为你的自定义样式文件路径
} )
.catch( error => {
console.error( error );
} );
在上述代码中,我们通过isReadOnly
选项将编辑器设置为只读模式,然后通过contentCss
选项指定了一个自定义样式文件的路径。你需要将/path/to/custom.css
替换为你实际的自定义样式文件路径。
custom.css
的文件,并添加以下内容:body {
background-color: red; /* 更改为你想要的背景颜色 */
}
将上述代码保存为custom.css
文件,并将文件路径更新到CKEditor 5的初始化代码中的contentCss
选项中。
通过以上步骤,当CKEditor 5被禁用时,编辑器的背景颜色将会更改为你指定的颜色。请注意,这只是一种解决方案,你可以根据实际需求进行调整和修改。
领取专属 10元无门槛券
手把手带您无忧上云