Editor is not working because of app.js

[sajjadalis]

Hi,

Laravel is adding app.js asset in head, which is causing issue with CKEditor. I see just a blank wrapper instead of CKEditor or simple textarea. http://prntscr.com/l3u3zv

As soon as i comment out app.js. It works.. I'm using Laravel 5.7..

This is the error in console.

ckeditor.js:326 Uncaught TypeError: Cannot read property 'unselectable' of null
    at b (ckeditor.js:326)
    at a.<anonymous> (ckeditor.js:322)
    at a.h (ckeditor.js:11)
    at a.<anonymous> (ckeditor.js:13)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:14)
    at a.fireOnce (ckeditor.js:13)
    at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:14)
    at Object.<anonymous> (ckeditor.js:252)
    at g (ckeditor.js:233)
    at Object.load (ckeditor.js:233)

[sajjadalis]

It seems Vue.js is causing issue. Commenting out Vue stuff in "/resources/js/app.js" fixed this issue.

[molsov]

This issue is because of the "defer" in

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

removing the "defer" will solve the problem

[sajjadalis]

Yes.. "defer" was the reason. Thank you.

[israrzaib199]

With "differ" my issue solved. but please let me know what this "differ" is use for?

[serban-alexandru]

With "differ" my issue solved. but please let me know what this "differ" is use for?

It worked for me! ty @israrzaib199 !

[StudioAleph]

I removed "defer" i have an other issue app.js give this error " app.js:37608 [Vue warn]: Cannot find element: #app " what's meaning of this ?

[RifkiCS29]

why is not working for me ? i have removed "defer"

[markrobtownsend]

why is not working for me ? i have removed "defer"

With "differ" my issue solved. but please let me know what this "differ" is use for?

defer is a boolean attribute that specifies whether the page should finish parsing before the script is executed. It is only for external scripts.

[markrobtownsend]

why is not working for me ? i have removed "defer"

Try moving the script to the bottom of the body tag to ensure that the page has loaded before the script is executed.

[ctujare]

why is not working for me ? i have removed "defer"

With "differ" my issue solved. but please let me know what this "differ" is use for?

defer is a boolean attribute that specifies whether the page should finish parsing before the script is executed. It is only for external scripts.

Ok looking at the code it Seems CKEDITOR.replace is running way before the page finishes loading ... so i went old school and added a onload="loadjs()" to the body take and moved CKEDITOR.replace inside that function .... It worked seemlessly without causing #app to cause another error...

Hope this would help someone....

[iamnotstatic]

I removed "defer" i have an other issue app.js give this error " app.js:37794 [Vue warn]: Cannot find element: #app what's meaning of this is it necessary ???

[markrobtownsend]

I removed "defer" i have an other issue app.js give this error " app.js:37794 [Vue warn]: Cannot find element: #app what's meaning of this is it necessary ???

If you want to delete defer, it will execute the script as soon as it comes across it in the code. If you have placed it before the <div id="app"></div> tag closes, it will try and find the element and it won't be there.

To get around this, just move the script to the end of your body element. That's what I did and all has worked fine. On top of this, I can also use the NodeJS compiler without any issues.

[codename11]

I removed "defer" i have an other issue app.js give this error " app.js:37794 [Vue warn]: Cannot find element: #app what's meaning of this is it necessary ???

If you want to delete defer, it will execute the script as soon as it comes across it in the code. If you have placed it before the <div id="app"></div> tag closes, it will try and find the element and it won't be there.

To get around this, just move the script to the end of your body element. That's what I did and all has worked fine. On top of this, I can also use the NodeJS compiler without any issues.

And i would like to add:

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

    <script src="/ckeditor/ckeditor.js"></script>
    <script defer>
        if(document.getElementById("ckeditor")){
            CKEDITOR.replace("ckeditor");
        }
    </script>

just before ckeditor

[Buba-Conteh]

This issue is because of the "defer" in

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

removing the "defer" will solve the problem

thanks a lot it worked for me but my vue is not working now