我正在尝试将 css 类应用于 ckeditor 内容的 html 元素,以支持我们的 CSS 自定义属性驱动的亮/暗主题切换器。下面的演示成功地在基于 Chromium 的浏览器中添加了该类,但在 Firefox 中,
editor.editor.document.$
对象未定义,即使编辑器对象的 console.log 显示它已定义。
任何想法为什么这在 Firefox 中不起作用?
我对 CKEDITOR 开发还很陌生,所以如果实际上有更好的方法来与 iframe 的 HTML 元素交互,我很乐意改用它。我知道有 bodyClass https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-bodyClass但不幸的是这对我们不起作用。
谢谢!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.on('instanceLoaded', function(editor){
console.log(editor);
if (typeof editor.editor.document !== 'undefined'){
editor.editor.document.$.documentElement.classList.add('sakai-dark-theme');
}
editor.editor.on('afterCommandExec', function(evt){
if (evt.data.name === 'source'
&& typeof evt.editor.document !== 'undefined'
&& typeof evt.editor.document.$ !== 'undefined') {
evt.editor.document.$.documentElement.classList.add('sakai-dark-theme');
}
})
});
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>