How to use ckeditor in laravel 5 - laravel

I'm creating a new Blog web application using laravel. In this app in need an editor to create blog posts so I use ckeditor for this.
I have used the official ckeditor documentation to install and setup the ckeditor but it is not show the editor in my textarea.
This is the script I used
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace('article-ckeditor');
</script>
This is implementing ckeditor
<div class="form-group">
{{Form::label('body', 'Body')}}
{{Form::textarea('body', $post->body, ['id' => 'article-ckeditor', 'class' => 'form-control', 'placeholder' => 'Body Text'])}}
</div>
Here I found some error in console log
Failed to load resource: the server responded with a status of 404 (Not Found) (ckeditor.js:1)
Uncaught ReferenceError: CKEDITOR is not defined at create:108
After run the php artisan vendor:publish --tag=ckeditor command i got more new errors.
Uncaught TypeError: Cannot read property 'unselectable' of null (ckeditor.js:326 )
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)
I'm creating a blogging app so I need an editor but it's not working and I can't solve this because it's not show any errors. The whole application is working property except this editor.

From the error it seems that the ckeditor.js file is not loading.
The official documentation of UniSharp/laravel-ckeditor says you should publish the resources via this command:
php artisan vendor:publish --tag=ckeditor
After that command you should have this file: your_project_path/public/vendor/unisharp/laravel-ckeditor/ckeditor.js.
Update: The last error (Cannot read property 'unselectable' of null) seems to be a known issue of ckeditor with the default laravel app.js, they recommend to remove defer from the line loading app.js in the template app.blade.php:
<script src="{{ asset('js/app.js') }}"></script>

Related

Vuejs3 + laravel 8 working find locally but in prod vuejs files throwing syntax error and view not render Uncaught SyntaxError: 59

build a project using Vuejs 3 in Laravel 8 went running on Laravel server it works well but went I run npm run prod and deploy it in Cpanel compilation fails with Uncaught SyntaxError: 59 in the console I have remove style and script tags from blade file but still have a problem. please I really need your help
Please check your final html code. May be there you will find a <style>...</style> or <script>...</script> tags... These are the main problem of Uncaught SyntaxError: 59. Yes, it will be ignored in local and development environment but won't in production one...
For example:
<div id="app">
<script>
alert('yes');
</script>
</div>
The main idea to put script and style tags out of the div#app element.

Error importing script in vue file in Vue 3

I'm using laravel-mix with Vue 3 and I'm getting the following error:
ERROR in ./resources/js/components/App.vue 2:0-54
Module not found: Error: Can't resolve './App.js/?vue&type=script&lang=js' in './resources/js/components'
components/App.vue
<template>
<div id="app">
<h1>Hello world</h1>
</div>
</template>
<script src="./App.js/"></script>
components/App.js
export default {
name: "App",
};
In my previous projects with Vue 2 and Laravel 7 I didn't get these errors. Now I'm using Vue 3 and Laravel 8, but don't know how to fix it. I have installed vue-loader and vue-template-compiler so I guess it should work.
Does Vue 3 allow importing a script from a separated js file? In Vue 2 that was possible (I like to separate the HTML from the JS because of some issues with my editor and also for better organization.)
This not related to Vue3, just you added slash after file so it's understanding as a dir.
<script src="./App.js/"></script>
to
<script src="./App.js"></script>

404 not found file iframe display in laravel after deploying

I'm trying to view a file that I have uploaded in a view but it shows 404 Not Found. It works fine in local but when I deploy it on heroku this error occurs. I tried php artisan storage:link but it is not working as well. This is the storage directory for the file:
storage/app/public/final_report/2_1_1_1613557659_Ruby Essay.pdf
My Controller:
//get the path for the current Peer Marks final report
$peer_final_report_path = $peer_assignment->final_report['path'];
$peer_final_report_path = "/storage/".$peer_final_report_path;
which the $peer_final_report_path will be /storage/final_report/2_1_1_1613557659_Ruby Essay.pdf
My View:
<!--Display peer marks final report using iframe-->
<div class="card-body" style="float:left;margin-top; 200px;">
<iframe id="pdf-document"
src="{{$peer_final_report_path}}" width="580px" height="800px" >
This browser does not support PDFs. Please download the PDF to view it: Download PDF
</iframe>
</div>
All help will be much appreciated.
Just try something like this.
Storage::url($yourfilepath);

How to use laravel-jsvalidation under laravel-modules?

In Laravel 6/nwidart/laravel-modules 7 app I installed proengsoft/laravel-jsvalidation
in the directory of my module but I got errors that
Class 'JsValidator' not found
When I used proengsoft/laravel-jsvalidation for all app and in blade file I had :
<script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
{!! JsValidator::formRequest('\Modules\Pages\Http\Requests\PageTypeRequest', '#form_page_type_edit'); !!}
But after I removed proengsoft/laravel-jsvalidation in root app and installed under my module
I found the file at path Project/Modules/Pages/vendor/proengsoft/laravel-jsvalidation/public/js/jsvalidation.js
and tried :
<script src="{{ asset('Modules/Pages/vendor/proengsoft/laravel-jsvalidation/public/js/jsvalidation.js')}}"></script>
But still the same error.
I tried
composer dump-autoload
both in app root and in package dir and failed.
Which way is correct ?
Thanks!

Laravel Nova Notification Feed package is not working

I am using Laravel Nova for the CMS Admin panel. I am integrating live notification feed feature into my Nova application using this package, https://novapackages.com/packages/coreproc/nova-notification-feed. But it is not working.
I installed the package running this command,
composer require coreproc/nova-notification-feed
Then I migrated the required database tables
php artisan notifications:table
php artisan migrate
Then I added the required keys in the env file
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=xxxxxxx
PUSHER_APP_KEY=xxxxxxx
PUSHER_APP_SECRET=xxxxxx
PUSHER_APP_CLUSTER=xxx
I uncommented BroadcastServiceProvider line in the config/app.php as well.
Then I added the following lines in the appropriate places as mentioned in the documentation in the resources/views/vendor/nova/layout.blade.php file.
#include('nova-echo::meta') <!-- INCLUDE THIS LINE HERE -->
#include('nova_notification_feed::notification_feed') <!-- AND THIS LINE HERE -->
To make sure the Echo and the Push are working, in the resources/views/vendor/nova/layout.blade.php file I added the following code snippet before the closing body tag.
<script>
Nova.liftOff()
Echo.channel('orders')
.listen('OrderShipped', (e) => {
alert('Pusher is working')
});
</script>
When I refresh the admin page, I can see that the channel is subscribed in the Pusher dashboard/ console.
But when I push notification from the Pusher console/ dashboard, it says the message has been pushed, but the event in the code is not working.
What is wrong or missing in my code?
You need to add a '.' before OrderShipped e.g.
<script>
Nova.liftOff()
Echo.channel('orders')
.listen('.OrderShipped', (e) => {
alert('Pusher is working')
});
</script>

Resources