CODEWITHSUNDEEP
ckeditor
Abhishek Moghe
Abhishek Moghe

Reputation: 11

How to integrate CKEditor with Chrome app

I am trying to integrate CKEditor with Chrome App (packages App). but it is not working, has anyone tried this before?

I was trying to create a sample app, there are two buttons "create editor" and "Remove Editor", 'create editor' button should open an editor where user can create some content(html/text) using ckEditor. and on click of "Remove Editor", the editor should be closed and content should be displayed below text "Edited Contents" on same page.

I am using angularJS for scripting.

here is code snippet of index.html

 <div lang="en" ng-app="demoApp" ng-controller="MainCtrl" >
     <p>Click the buttons to create and remove a CKEditor instance.</p>
    <p>
        <input ng-click="createEditor()" type="button" value="Create Editor">
        <input ng-click="removeEditor()" type="button" value="Remove Editor">
    </p>
    <!-- This div will hold the editor. -->
    <div id="editor">
    </div>
    <div id="contents" style="display: none">
        <p>
            Edited Contents:
        </p>
        <!-- This div will be used to display the editor contents. -->
        <div id="editorcontents">
        </div>
    </div>
 </div>

here is code of main.js

var demoApp = angular.module('demoApp', []);

var MainCtrl = function($scope) {
        var editor, html = '';

         $scope.createEditor =function() {
            if ( editor )
                return;

            // Create a new editor inside the <div id="editor">, setting its value to html
            var config = {};
             editor = CKEDITOR.appendTo( 'editor', config, html );
          }

        $scope.removeEditor = function() {
            if ( !editor )
                return;
            document.getElementById( 'editorcontents' ).innerHTML = html = editor.getData();
            document.getElementById( 'contents' ).style.display = '';
            // Destroy the editor.
            editor.destroy();
            editor = null;
        }

   // $scope.Wrapper = Serv;
}

demoApp.controller('MainCtrl',MainCtrl);

if i am running this example as web application it runs fine. but when i convert it into packaged chrome app, it throws below error on debug console

document.open() is not available in packaged apps.extensions::platformApp:17
Uncaught Error: document.write() is not available in packaged apps.extensions::platformApp:31

Please help.

Upvotes: 1

Views: 739

Answers (1)

Wiktor Walc
Wiktor Walc

Reputation: 5560

It looks like the problem might be in the lack of access to certain API methods in this environment. A bit of googling lead me to this link:

New Packaged apps, specifically those with manifest_version:2 are not able to use document.write directly or load scripts in between script elements.

You can use the sandbox where all these features are enabled, so check out http://developer.chrome.com/trunk/apps/app_external.html#external

CKEditor needs access to document.write in the wysiwygarea plugin, which is used by the classic editor. As the simplest workaround you may try using inline editor instead to see if that will help (if you need inline editor with Fixed UI, check the second sample here).

Upvotes: 1

Related Questions