laraveltinymcetailwind-csstinymce-5

TinyMCE editor Preview not working in Tailwind css


<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> this is CDN link

<script type="text/javascript">

            tinymce.init({

            selector: 'textarea.tinymce-editor',

            height: 300,

            menubar: false,

            plugins: [

                'advlist autolink lists link image charmap print preview anchor',

                'searchreplace visualblocks code fullscreen',

                'insertdatetime media table paste code help wordcount', 'image'

            ],

            toolbar: 'undo redo | formatselect | ' +

                'bold italic backcolor | alignleft aligncenter ' +

                'alignright alignjustify | bullist numlist outdent indent | ' +

                'removeformat | help',

            content_css: '//www.tiny.cloud/css/codepen.min.css'

        });

    </script>

{!! $courses->body !!} 

i tried to show the content on preview page.. but not showing this preview i tried to show the content on preview page.. but not showing this preview i tried to show the content on preview page.. but not showing this preview


Solution

  • I'm using tailwind-css..so normal css not working on that preview page..

    so i use on

    <div class="prose max-w-none">
        {!! $courses->body !!}
    </div>
    

    In the code above, I've used the prose class for styling text content and max-w-none to remove the maximum width constraint, allowing the content to expand as needed.