CKEditor in Chrome-Erweiterung

Question

Ich versuche CKEditor in Chrome-Erweiterung zu instanziiert, aber ich erhalte den folgenden Fehler:

Uncaught TypeError: Cannot read property 'tools' of undefined

mit dem Objekt nicht definiert window.parent.CKEDITOR wird.

Hier ist ein Block von meinem Manifest-Datei, wo ich einige der Dateien des ckeditor Ordner nur importiert:

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

Und hier ist, wie ich den Editor instantiieren:

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 hat es geschafft Verwenden Sie CKEDITOR auf einer Chrome-Erweiterung und möchten Sie einen Hinweis teilen? Dank

Answer 1

CKeditor stützt sich stark auf dynamisch geladenen Skripten über <script> Element. Diese werden im Kontext einer Webseite ausgeführt und sehen daher kein CKEDITOR-Objekt, nicht im Kontext eines Inhaltsskripts, das in einer "isolierten Welt" ausgeführt wird. Keine der beiden Welten (Webseite & Inhaltsskripte) kann direkt auf andere Objekte/Variablen zugreifen, um die Sicherheit der privilegierten Umgebung in Inhaltsskripten zu gewährleisten, da diese direkten Zugriff auf einige von chrome. * API haben und mit ihren Hintergrundseiten kommunizieren können die gesamte Chrome API.

Sie können manuell in den CKEditor-Quellcode einhacken und die erforderlichen Ressourcen kopieren, wie z. B. lang/en.js, styles.js und andere.

Alternativ können Sie den gesamten CKEditor in den Kontext der Webseite stellen, indem Sie sein Skript in ein <script> Element einfügen und alle notwendigen Dateien unter "web_accessible_resources" in manifest.json deklarieren. Sie haben jedoch keinen direkten Zugriff auf CKEDITOR über Ihr Inhaltsskript.

Wie auch immer, CKEditor wirklich sollte in Betracht ziehen, ein komplettes js Bündel mit mindestens Englisch Sprache (oder eine benutzerdefinierte Reihe von Sprachen), Stile, etc. Nag die Entwickler.