CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionckeditor
Dario
Dario

Reputation: 6280

CKEditor in chrome extension

I'm trying to instantiate CKEditor in chrome extension but I get the following error:

Uncaught TypeError: Cannot read property 'tools' of undefined

with the object being undefined is window.parent.CKEDITOR.

Here's some block of my manifest file where I imported only some of the files of the ckeditor folder:

"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"
   ]
]

And here's how I instantiate the editor:

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];

Anyone has managed to use CKEDITOR on a chrome extension and wants to share some hint? Thanks

Upvotes: 0

Views: 1728

Answers (1)

woxxom
woxxom

Reputation: 73826

CKeditor heavily relies on dynamically loaded scripts via <script> element. Those are executed in the context of a web page and thus don't see CKEDITOR object, not in the context of a content script that is executed in an "isolated world". None of the two worlds (webpage & content scripts) can access other's objects/variables directly to ensure security of the privileged environment inside content scripts as those have direct access to some of chrome.* API and can communicate with their background pages giving access to all of the Chrome API.

You can manually hack into CKEditor's source code and copypaste the required resources it tries to load inside, like lang/en.js, styles.js and others.

Alternatively you can put the entire CKEditor in the context of the web page by injecting its script inside a <script> element and declare all necessary files in "web_accessible_resources" in manifest.json. You won't have direct access to CKEDITOR from your content script though.

Anyway, CKEditor really should consider providing a complete js bundle with at least English language (or a user-defined set of languages), styles, etc. Nag the developers.

Upvotes: 1

Related Questions