Laravel + Tinymce - works only on app.blade.php

Hello guys, I have added TinyMCE wysiwyg editor to my project, but I have a problem.

When I add TinyMCE to my main template view App.blade.php like that (on bottom of body):

<textarea class="description" name="description"></textarea>
        <script src="https://cdn.tiny.cloud/1/APIKEY/tinymce/5/tinymce.min.js"></script>
<script>
     tinymce.init({
       selector:'textarea.description',
       width: 900,
       height: 300
     });
</script>

Is all OK but only on main template view, in other views for example create.blade.php I have a non-clickable TinyMCE editor's window. And I cant there nothing to click, write etc. In console I don't have any errors. Can you help me solve this problem. How to this share script on all views?

ziben69

6 years ago

Level 3

Here is my app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

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

        <!-- Fonts -->
        <link rel="dns-prefetch" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">

        
        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <link href="{{ asset('css/layout-styles.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"      
        rel="stylesheet" type="text/css">
        <!--Dynamic StyleSheets added from a view would be pasted here-->
        @yield('styles')
    </head>
    <body>
        <div id="app">
            <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
              ...
            </nav>
            <div class="py-5">
                @yield('content')
            </div>
        </div>

        <textarea class="description" name="description"></textarea>  //////////////////////////////THIS ONE WORKS
        <script src="https://cdn.tiny.cloud/1/API KEY/tinymce/5/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector:'textarea.description',
                width: 900,
                height: 300
            });
        </script>
        @yield('scripts')

    </body>
</html>

And for example one of my views that uses TinyMCE:

@extends('layouts.app') @section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <!-- Page-Title -->
                    <form action="{{ action ('SubpageController@store')}}" method="POST"
                          enctype="multipart/form-data">
                        <input type="hidden" name="_token" value="{{csrf_token() }}"/>
                           ...
                        <div class="form-group" style="position:relative">
                            <label for="description">Description:</label>
                            <textarea class="description" name="description"></textarea> /////////////////// HERE IS TinyMCE EDITOR - NOT WORKING
                        </div>
                        <input type="submit" value="Create" class="btn btn-primary"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection('content')

the editor is displayed on all views but is locked on other views than app.blade.php