CKEditor does not render in Chrome

Question

Background: I am building a blog application in which the blog content textarea field is to be replaced with CKEditor.

Issue: After i load the web page in Chrome, i get the below error with the text area disabled. "Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined"

Code: Javascript:

$(document).ready(function() {
    CKEDITOR.addCss('body {font-family: "Roboto", "Helvetica", "Arial", sans-serif;}');
    var contentEditor = CKEDITOR.replace( 'blogContent' );
});

HTML:

<body>
   <textarea type="text" rows= "10" name="blogContent" id="blogContent" 
   maxlength="2000"></textarea>

   <script src="//cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
   <script src="/js/blog-form.js"></script>
</body>

Versions: Chrome: Version 66.0.3359.139 (Official Build) (64-bit) CKEditor: 4.9.2

I am looking for help to resolve this issue. This issues doesn't come up in other browsers - Edge and Firefox.

but, it"s working my chrome 66.0.3359.139 perfectly. if any errors or exception shown in console? — Pandi_Snkl, May 08 '18 at 09:53
The error shown in the console is: "Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined" and the textarea is disabled. One more observation: for a certain time period, the textarea becomes disabled with the above mentioned error after few minutes if i reload the page it works fine but this issue is consistent. — RajKrishnan, May 08 '18 at 11:44

score 0 · Accepted Answer · answered May 08 '18 at 11:52

0

Run this code, it's working on chrome:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
   <script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>

<script>
$(document).ready(function(){


    CKEDITOR.addCss('body {font-family: "Roboto", "Helvetica", "Arial", sans-serif;}');
    var contentEditor = CKEDITOR.replace( 'blogContent' );
});
</script>
</head>
<body>


 <textarea type="text" rows= "10" name="blogContent" id="blogContent" 
   maxlength="2000"></textarea>





</body>
</html>

answered May 08 '18 at 11:52

Pandi_Snkl

476
5
16

also check this link 'https://stackoverflow.com/questions/24178904/cannot-read-property-getcomputedstyle-of-undefined-ckeditor' same problem you mentioned. – Pandi_Snkl May 08 '18 at 11:55
Issue resolved. The trick is adding the latest jquery.js file. Thanks Mate. – RajKrishnan May 09 '18 at 07:12

CKEditor does not render in Chrome

1 Answers1