chrome 扩展中的 CKEditor

Question

我正在尝试在 chrome 扩展中实例化 CKEditor，但出现以下错误：

未捕获的类型错误：无法读取未定义的属性“工具”

未定义的对象是window.parent.CKEDITOR。

这是我的清单文件的一些块，我只导入了 ckeditor 文件夹的一些文件：

"content_scripts": [
  "css": [
     "bower_components/ckeditor/skins/moono/editor.css"
   ],
   "js": [
     "bower_components/ckeditor/ckeditor.js",
      "bower_components/ckeditor/styles.js",
      "bower_components/ckeditor/lang/en.js"
   ]
]

下面是我实例化编辑器的方法：

var options = {
  language: 'en',
  customConfig: '',   //no default config loaded
  toolbar: [
  [ 'Format', 'Bold', 'Italic', 'Underline' ,
    'BulletedList', 'NumberedList', 'Outdent', 'Indent', 'Link']
  ],
  enterMode: CKEDITOR.ENTER_DIV,
  on: {
    instanceReady: function() { console.log('ready'); }
  },
  removePlugins: 'elementspath'
}

var instance = CKEDITOR.replace('textarea1', options);
editor =  CKEDITOR.instances[instance.name];

有人设法在 chrome 扩展上使用 CKEDITOR 并想分享一些提示吗？ 谢谢

Answer 1

CKeditor 严重依赖通过<script> 元素动态加载的脚本。这些是在网页的上下文中执行的，因此看不到 CKEDITOR 对象，而不是在“孤立世界”中执行的内容脚本的上下文中。这两个世界（网页和内容脚本）都不能直接访问其他对象/变量，以确保内容脚本中特权环境的安全性，因为它们可以直接访问某些 chrome.* API，并且可以与他们的后台页面进行通信，从而可以访问所有 Chrome API。

您可以手动侵入 CKEditor 的源代码并复制粘贴它尝试在其中加载的所需资源，例如 lang/en.js、styles.js 等。

或者，您可以将整个 CKEditor 放入网页的上下文中，方法是将其脚本注入 <script> 元素中，并在 manifest.json 中的 "web_accessible_resources" 中声明所有必要的文件。不过，您将无法从内容脚本直接访问 CKEDITOR。

无论如何，CKEditor真的应该考虑提供一个完整的 js 包，至少包含英语（或一组用户定义的语言）、样式等。唠叨开发者。