1

我正在尝试将 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>
4

0 回答 0