laraveltinymcetinymce-5

Get html output from tinymce with laravel


I'm trying to implement tinymce 5 to my cms. I'm using Laravel 8.

    <div class="mt-5">
      <label for="crud-form-2" class="form-label">Description</label>
      <textarea id="editor"  name="innerText"></textarea>
   </div>


tinymce.init({
            selector: '#editor',
            plugins: [
                "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
                "help", "image", "insertdatetime", "link", "lists", "media",
                "preview", "searchreplace", "table", "visualblocks",
            ],
            toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        });

Lets say that I build some html structure on tinymce editor.

<h3>Some description</h2>

But when I post all form data, I can not access html structure. I only get 'Some Description' How can I get html output from tinymce.

Ajax version;

<form action="{{route('corporate.update')}}" method="POST">
 <div class="mt-5">
      <label for="crud-form-2" class="form-label">Açıklama</label>
      <textarea id="editor"  name="innerText"></textarea>
   </div>
   <button type="submit">Submit</submit>
 </form>

Javascript

$('form').on('submit', function (e) {
            e.preventDefault();
            let route = $(this).data('route');
            let innerText = tinyMCE.activeEditor.getContent({format : 'raw'});
            let formData = $(this).serializeArray();

            $.ajax({
                url: route,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: "POST",
                data: formData,
                beforeSend: function () {
                    $('body').css('cursor', 'progress');
                },
                complete: function () {
                    $('body').css('cursor', 'default');
                },
                success: function (response) {
                    if (response) {

                    }
                },
            });

        })

Solution

  • I had the same problem but with CKEditor and laravel

    I used a workaround is that I wrapped the content of the editor in a string and put that string in a JSON along with other properties (timestamps... those were specific to my case)

    somehow that worked

    the reason I thought this was a similar problem is that when I inspected the payload it did in fact send the html tags along but only when I dd() in laravel that the tags get removed.

    Hope this helps.