Can't save Tiny MCE data | Laravel 8 Livewire

Question

I have implemented Tiny MCE for my news articles and got it working with the code below. When I implement the same code on a different crud page the Tiny MCE content doesn't save into my variable.

Create.blade.php

<!-- TinyMce -->
<div class="mb-2 col-span-8 sm:col-span-8" wire:ignore>
  <textarea class="tinymce form-input rounded-md shadow-sm mt-1 block w-full " id="content"
    name="content" rows="20"
    wire:model.debounce.9999999ms="content"
    wire:key="content"
    x-data
    x-ref="content"
    x-init="
      tinymce.init({
        path_absolute: '/',
        selector: 'textarea.tinymce',
        plugins: [
         'advlist autolink lists link image charmap print preview hr anchor pagebreak',
          'searchreplace wordcount visualblocks visualchars code fullscreen ',
          'insertdatetime media nonbreaking save table directionality',
          'emoticons template paste textpattern  imagetools help  '
           ],
            toolbar: 'insertfile undo redo | styleselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | help ',
            relative_urls: false,
            remove_script_host : false,
            document_base_url: '{{config('app.url')}}/',
            language: 'en',
            setup: function (editor) {
              editor.on('init change', function () {
                editor.save();
              });
              editor.on('change', function (e) {
                @this.set('content', editor.getContent());
              });
            },
      });
    ">
  </textarea>
</div>

create.php

public $content = '';
dd($this->content);

The outcome of dd is an empty string and if I don't define the variable it will be null.

score 0 · Answer 1 · edited Nov 26 '22 at 12:29

This option avoids making so many calls to the server with change or blur events.

<script>
var keypupTimer;
tinymce.init({
    selector: '#description',
    forced_root_block: false,
    theme: "modern",
    height: 300,
    plugins: [
        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "save table contextmenu directionality  template paste textcolor"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",

    setup: function(editor) {
        editor.on('init change', function() {
            editor.save();
        });


        editor.on('KeyUp', function(e) {
            clearTimeout(keypupTimer);
            keypupTimer = setTimeout(DoSomething, 1000);
        });

    },

});

function DoSomething() {
    @this.set('description', tinyMCE.activeEditor.getContent());
}
</script>

Could you edit the answer and use English? – Anton Krug Jun 08 '21 at 20:08 — Anton Krug, Jun 08 '21 at 20:08

Can't save Tiny MCE data | Laravel 8 Livewire

1 Answers1