无法保存微小的 MCE 数据 | Laravel 8 Livewire

问题描述

我已经为我的新闻文章实现了 Tiny MCE，并使用下面的代码使其工作。当我在不同的 crud 页面上实现相同的代码时，Tiny MCE 内容不会保存到我的变量中。

创建.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);

dd 的结果是一个空字符串，如果我不定义变量，它将为空。

解决方法

De tanto buscar me parece que esta es una opcion mas optima para no estar dando tantas llamadas al servidos con el evento chage o blur

 <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>