Hi I use this package for Laravel 5.2 but it doesn't work for me. Can someone help me ?
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
$('textarea').ckeditor();
// if class is prefered.
// $('.textarea').ckeditor();
</script>
My Console Screenshot
please try to use jquery version 1.12.0, i had same issue but got it resolved using j v1.12.0
By default you may use id of the textarea in replace function.
my page code
#extends('layouts.app')
{!! Html::script('js/jquery.min.js') !!}
#section('content')
<div class="container spark-screen">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'article-ckeditor' );
</script>
</div>
</div>
</div>
</div>
</div>
#endsection
I got the same issue but using the cdn link <script src="//cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script> instead, solved my problem.
check this
Sometimes yo may need to point your source one level higher from the current directory.
You achieve this by adding ../ to your source directory. Check it below
<script src="../vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="../vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
<script>
$('textarea').ckeditor();
// if class is prefered.
// $('.textarea').ckeditor();
</script>
Related
I have the following blade template:
<body>
<div id="app">
#extends('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Laravel first shows this:
<main class="py-4">
#yield('content')
</main>
And then:
#extends('layouts._navbar')
How do I to show the contents in the right order?
You have to use include instead of extends :
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
Change the #extends('layout._navbar') to #include('layout._navbar').
Currently you're trying to push your blade file into the layout._navbar, instead of including it.
Laravel documentation on Blade Subviews
Your blade file will look like this after the edit:
<body>
<div id="app">
#include('layouts._navbar')
<main class="py-4">
#yield('content')
</main>
</div>
</body>
This is my first time to use Vue js and i do not have any idea why it does not work. I been trying to use the default codes in my Laravel Application.
Here is my code in app.js:
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Here is my code in ExampleComponent.vue file:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Here is my code for the view:
<div id="app">
<example-component></example-component>
</div>
And when i run npm run watch it says successful. Any help would be appreciated. I really need help. Thanks.
I'm stucked with this code. I can't make it work, and i don't get any errors. Which might mean that i need an aditional dependency? It's simply not showing. Please help me. Thanks.
app.js - file
Vue.component('message', require('./components/Message.vue'));
const app = new Vue({
el: '#app'
});
Message.vue - file
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Message</div>
<div class="panel-body">
I'm the component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
ready () {
console.log('Component ready')
}
}
</script>
home.blade.php - file
#extends('templates.default')
#section('content')
<h3>Welcome to Site</h3>
<div class="container">
<div id="app">
<message></message>
</div>
</div>
#stop
You may also need to clear browser cache when working with frontend. On mac this is command + shift + R. Also make sure you did run gulp to compile your js file.
Also make sure you included compiled js file to your layout template before </body>:
<script src="/js/app.js"></script>
I think you're missing the .default from the line
Vue.component('message', require('./components/Message.vue').default);
I am having trouble rendering a view in my controller. I am currently running Laravel 4 and below is my code. (BTW, I am still learning Laravel particularly the latest version that has not been released yet. I find it a bad idea to learn from the older versions because there seems to be a lot of changes for the current one.)
controllers/PluginsController.php
class PluginsController extends BaseController {
public function index()
{
return View::make('plugins.index')->with(array('title'=>"The Index Page"));
}
views/plugins/index.blade.php
#layout('templates.master')
#section('header')
<h1>The Header</h1>
#endsection
#section('content')
testing the index.blade.php
#endsection
#section('footer')
<div style="background:blue;">
<h1>My Footer Goes Here</h1>
</div>
#endsection
views/templates/master.blade.php
<!doctype>
<html>
<head>
<meta charset="UTF-8" />
#yield('meta_info')
<title>{{$title}}</title>
#yield('scripts')
</head>
<body>
<div id="header">
#yield('header')
</div>
<div id="wrapper">
#yield('content')
</div>
<div id="footer">
#yield('footer')
</div>
</body>
</html>
you must use #extends instead of #layout, and #stop instead of #endsection
Using #extends instead of #layout solved my problem.
The following code snippet which includes an onClick event will
not work until I click reload on both the simulator and the phone.
The code is in an .erb file in an app model folder.
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="show-menu" onclick="ToggleText()">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
<script type="text/javascript">
function ToggleText() {
$(".sliding-menu").toggleClass("reverse out in");
}
</script>
I'm using rhomobile 3.2.1 with. Can someone explain why and what to do to
fix it?
Would something like this work?
http://jsfiddle.net/aJshm/3/
JS
$('.toggle-menu').click(function() {
$(".sliding-menu").toggleClass("reverse out in");
});
HTML
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="toggle-menu">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
Just a guess, try defining the function before it is invoked?