Wednesday, March 28, 2018
How to install Tinymce on Laravel 5.5
1- Download latest TinyMce
2- Extract and copy files in
public folder -> js folder
3- Install Laravel elfinder package This package we will use to import file and images in our text editor.
4- Import
Tinymce JavaScript files in head of your blade
Example:
Go to your blade for
creating posts in top of your content section add code below@section('styles')
<script src="{{asset('js/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('js/tinymce/tinymce.min.js')}}"></script>
@endsection
And in bottom of your page where
content section finishes add code below@section('scripts')
<script>
var editor_config = {
path_absolute : "/",
selector: "textarea.editor",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern codesample",
"fullpage toc tinymcespellchecker imagetools help"
],
toolbar: "insertfile undo redo | styleselect | bold italic strikethrough | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent removeformat formatselect| link image media | emoticons charmap | code codesample | forecolor backcolor",
external_plugins: { "nanospell": "http://YOUR_DOMAIN.COM/js/tinymce/plugins/nanospell/plugin.js" },
nanospell_server:"php",
browser_spellcheck: true,
relative_urls: false,
remove_script_host: false,
file_browser_callback : function(field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinymce.activeEditor.windowManager.open({
file: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
title: 'File manager',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
};
tinymce.init(editor_config);
</script>
<script>
{!! \File::get(base_path('vendor/barryvdh/laravel-elfinder/resources/assets/js/standalonepopup.min.js')) !!}
</script>
@endsection
NOTE1: I imported some plugins that might not be included default package that you'll download from tinymce (you can edit or download those from tinymce website)
NOTE2: edit
YOUR_DOMAIN.COM to your domain (local or host)
NOTE3: If you wonder where these scripts and styles sections came from, they are yielded in my layout here is example of it:
... Codes Above....
<link href='//fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
@yield('styles')
</head>
<body>
@yield('content')
<script src="{{ asset('default/admin/js/bootstrap.min.js') }}"></script>
@yield('scripts')
</body>
</html>
As you see I loaded my styles section top of my layout under latest css file and my scripts section bottom of my layout after latest script file. In this way I always load files that are using in every page and then load each page different styles and scripts.
PS: If you thinking that I loaded my editor
javascripts in styles section and I did wrong, you are mistaking because I wanted to my JS files to load in head of my page as it is required.
Anyway, lets back to tutorial,
5- Next step is to add our class to Textarea input field, as you can see in our scripts I provided class name editor
selector: "textarea.editor",
So I need to give this class in my Textarea field, like:
<textarea value="{{old('description')}}" class="form-control editor" name="description" rows="10" cols="50"></textarea>
Now editor works just fine, refresh and test it out.
Oops...!
Elfinder not working! when you click on upload button you'll get error, how to fix it?
6- Go to
vendor/barryvdh/laravel-elfinder/config open elfinder.php
7- edit line 43
'middleware' => 'replace-this-with-your-middleware', to 'middleware' => 'auth' in this case only logged users can use elfinder (you're free to use any middleware you like)
Now it should work.
Troubleshooting
You could face white page error of laravel 5.5
Sorry, the page you are looking for could not be found.
If so, open your config file again (no.7)
change line 27
'disks' => [
],
to
'disks' => [
'local',
],
Now everything works just fine and you have your complete text editor .
