First run this command in command line.
composer require unisharp/laravel-ckeditor
Add in service provider
Unisharp\Ckeditor\ServiceProvider::class,
run this command
php artisan vendor:publish --tag=ckeditor
add this code in my blade file js section
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'article-ckeditor' );
</script>
there is no error but textarea show normal as like before
try to use the 'asset' method to access your ckeditor.js script from the vendor folder
try it like this
<script src="{{ asset('/vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
Related
I am trying to set the options for the editor in an external file outside of my HTML file. I have everything imported and I can change the options from within the HTML script but when I try in the external file I get the error misspelled option "enableLiveAutocompletion". I've attached some code snippets below:
main HTML file:
<script src="/editor/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/editor/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script type="module" src="src/js/main.js"></script>
code.js file (imported through main as a module)
ace.require("ace/ext/language_tools");
this.session = ace.createEditSession("// Edit Session " + name);
this.session.setOptions({
enableLiveAutocompletion : true
})
If anyone could provide some insight that would be great.
I have tried creating the session in the HTML file and it works fine. Although when I try to do it externally I get that error.
enableLiveAutocompletion is an option for the editor, not session, set it when you call ace.edit
How to use a js file outside Laravel Blade html?
Besides my layouts file, I have a single file welcome.blade.php for the html and it requires a fair amount of scripts. To improve neatness, I wanted to move the <scripts> from the bottom of welcome.blade.php into a separated .js file.
See below for current code, mainly a test to get things working.
welcome.blade.php
#extends('layouts')
#section('content')
<div>
Body Content
</div>
#endsection
// Script added to the bottom of welcome.blade
// How to move into a separated file, like in resources/js/welcome.js
// <script src='/js/welcome.js'></script> doesn't work
<script>
alert('js works');
</script>
Even when I create a new welcome.js script inside the resources/js folder, linking via src or assets doesn't work.
I don't want to put it in the app.js (default laravel install folder structure), because then it'll load in for EVERY page, instead of just welcome.js.
I've tried using stack, but the file doesn't exist when using asset. However, it does work when writing the script itself into the push block. But then that's not using a separate .js file anyway...
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
welcome.blade.php
...
#push('scripts')
// Works when directly writing the script here
// Trying to use `<script src="{{ asset('js/welcome.js' }}"></script>` fails
// No js/welcome.js found.
<script>
alert('js works');
</script>
#endpush
How can I use a separate .js file inside a Laravel Blade HTML Template?
Edit
Did I actually need to make the welcome.js script public in webpack mix? It seems to work now after adding the additional .js line.
See answer.
Versions: Laravel 8
Issue was that the separated .js file didn't exist anywhere, hence couldn't be by welcome.blade.php. Solved by outputting the script to public in webpack mix
Script file, welcome.js
alert('js works');
welcome.blade.php
#push('scripts')
<script src="{{ asset('js/welcome.js' }}"></script>
#endpush
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/welcome.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
I want to use the package Sortablejs within my blade file.
Thus, I installed it with npm and created a sortable.js file inside my assets with this content
import Sortable from "sortablejs";
which is compiled into the public folder using webpack.mix.js
I expected that I could use it like this within my blade:
<script src="{{ asset('js/sortable.js') }}"></script>
<script type="text/javascript">
var documentlists = $('#documentlist');
Sortable.create(documentlists);
</script>
However, this results in the error:
Uncaught ReferenceError: Sortable is not defined
http://localhost:8004/admin/settings/businessagreement:715
Why can't I include it like this and how would I need to do it?
Your import statement needs to be in the same file as your Sortable code. Then you can run npm run watch to create your script with laravel mix.
Blade file loads Javascript files
<script src="{{ asset('js/sortable.js') }}"></script>
<script src="{{ asset('is/myscript.js') }}"></script>
myscript.js is generated by npm run watch
import Sortable from "sortablejs";
var documentlists = $('#documentlist');
var sortable = Sortable.create(documentlists);
Maybe it even works when leaving out the first script tag.
Ok First In app.js put
import Sortable from "sortablejs";
and make sure that it is imported => if you use vs code press ctrl + click on sortablejs if not just try
npm run watch then in your main blade import app.js
<script src="/js/app.js"></script>
then do whatever you want
So, I am trying out jekyll and I have successfully added my .scss files and they are working but there seems to be a problem with the .js files.
I have tried adding .coffee files and adding the plug-in jekyll-coffeescript but that too isnt working
so my folder structure is this:
\javascripts
|__ main.js
\_includes
\_sass
\_layouts
\_config.yml
\index.html
now in the main.js file i just have
console.log("this worked");
alert("hello");
and I have a head.html in the _includes folder where I added
<script type="text/javascript" src="{{site.baseurl}}/javascripts/main.js" ></script>
when I load the page nothing is happening, why? what is the mistake?
I added the same thing like this and it worked
<script type="text/javascript" >
console.log("this worked");
alert("hello");
</script>
so why is the previous method not working
I have written nothing in the _config.yml file about any javascript
I assume that you have kept your main.js file under your_site/assets/js/javascripts/
Try this path to load the js file:
<script type="text/javascript" src="/assets/js/javascripts/main.js" ></script>
Also you can check localhost:port/assets to see other files as well.
Let me know if this helps.
I have my root folder htdocs/_ and my custom CKEditor folder htdocs/_/ckeditor where all my CKEditor files are in. But when I run CKEditor it looks for all the CKEditor files in htdocs/_
<textarea name='post_editor' id='post_editor' rows='10' cols='80'></textarea>
<script type='text/javascript'>
CKEDITOR.replace('post_editor');
</script>
It works for me with the underscore in URL, so I don't know what may be wrong in your case. Did you e.g. changed the name of ckeditor.js file?
As a workaround, try setting CKEDITOR_BASEPATH. You can find more in the Specifying the Editor Path guide.
<script>
var CKEDITOR_BASEPATH = 'htdocs/_/ckeditor/';
</script>
<script src="htdocs/_/ckeditor/ckeditor.js"></script>