时间戳

首页 > 解决方案 > 无法保存 Tiny MCE 数据 | Laravel 8 Livewire

tinymce - 无法保存 Tiny 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>

创建.php

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

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

结果 dd

标签： tinymcelaravel-8livewires

解决方案

De tanto buscar me parece que esta es una opcion mas optima para no estar dando tantas llamadas al servidos con el eventto 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>

推荐阅读