2

I have a basic HTML form in (create.cshtml), and I called the CKEditor.js in the main layout (_layout.cshtml) When I use the same code in a seperate project, it works fine, but in my ASP.NET project I get this error: Uncaught TypeError: Cannot read property 'unselectable' of null

Create.cshtml :

<form>
    <textarea id="prop_editor" name="prop_editor">
         <h2>WYSIWYG Editor</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper sapien non nisl facilisis bibendum in quis tellus. Duis in urna bibendum turpis pretium fringilla. Aenean neque velit, porta eget mattis ac, imperdiet quis nisi. Donec non dui et tortor vulputate luctus. Praesent consequat rhoncus velit, ut molestie arcu venenatis sodales.</p>
         <h3>Lacinia</h3>
         <ul>
              <li>Suspendisse tincidunt urna ut velit ullamcorper fermentum.</li>
              <li>Nullam mattis sodales lacus, in gravida sem auctor at.</li>
              <li>Praesent non lacinia mi.</li>
              <li>Mauris a ante neque.</li>
              <li>Aenean ut magna lobortis nunc feugiat sagittis.</li>
         </ul>
         <h3>Pellentesque adipiscing</h3>
         <p>Maecenas quis ante ante. Nunc adipiscing rhoncus rutrum. Pellentesque adipiscing urna mi, ut tempus lacus ultrices ac. Pellentesque sodales, libero et mollis interdum, dui odio vestibulum dolor, eu pellentesque nisl nibh quis nunc. Sed porttitor leo adipiscing venenatis vehicula. Aenean quis viverra enim. Praesent porttitor ut ipsum id ornare.</p>

     </textarea>
</form>

_layout.cshtml

<script type="text/javascript">
     CKEDITOR.replace('prop_editor');
</script>
Amir Nassal
  • 409
  • 2
  • 7
  • 22

5 Answers5

5

I experienced something similar after enabling authentication in my Laravel project. The

CKEDITOR.replace('textarea_id');

command threw the same error.

I determined that the inclusion of the app.js script was causing the problem. Removing the

<script src="{{ asset('js/app.js') }}" defer></script>

tag solved the problem. Of course, this broke some of the authentication functionality, so not a good solution.

After some fruitless poking around, I found that removing the "defer" keyword from the script tag solved the problem. I have no idea why. Take a look at your tags; this might help.

McKenzma
  • 51
  • 1
  • 6
2

I Faced the same issue & find this solution which worked for me in app.blade.php change 

<script src="{{ asset('js/app.js') }}" defer></script>

to

<script type="text/javascript" rel="script" src="{{asset('js/app.js')}}"></script>
Hamaiz Ahmad
  • 39
  • 2
0

you must replace 

<script src="//cdn.ckeditor.com/4.11.1/basic/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

after jquery.js

Vahid Alvandi
  • 588
  • 9
  • 17
0

The reason for this might be that you have not loaded all required functionality prior the inclusion of CKEditor. Verify all existing application scripts for asyncronous downloading and adjust accordingly.

This could be achieved by removing tag attributes such as "defer" or "async".

Important: anyncronous loading/execution makes sense for speed optimisations.

Feel free to also check this question: Script Tag - async & defer

dankilev
  • 720
  • 2
  • 10
  • 32
0

Try to destroy previously opened CK editors before new CK-Editor load

for (name in CKEDITOR.instances) {
        CKEDITOR.instances[name].destroy()
 }
Bharath
  • 1