肝线summernote不会触发文本区域的更改

问题描述

有人可以帮忙吗，我正在尝试使用livewire组件和夏季笔记，并且在正常输入字段中可以正常使用该功能，但是一旦将类更改为夏季笔记，该值就不再更新类型。任何帮助将非常感激！更生动的形式：

<div>
    <p>{{ $note }}</p>
    <textarea class="summernote" id="kt_summernote_1" name="note" wire:model="note"></textarea>
</div>

PHP 文件：

<?PHP

namespace App\Http\Livewire;

use Livewire\Component;

class LessonContentForm extends Component
{
    public $note;

    public function render()
    {
        return view('livewire.lesson-content-form');
    }
}

最后是SummerNote的JS：

<script type="text/javascript">
        "use strict";
        // Class deFinition

        var KTSummernoteDemo = function () {
            // Private functions
            var demos = function () {
                $('.summernote').summernote({
                    height: 400,tabsize: 2,});
            }

            return {
                // public functions
                init: function() {
                    demos();
                }
            };
        }();

        // Initialization
        jQuery(document).ready(function() {
            KTSummernoteDemo.init();
        });
    </script>

解决方法

最好的方法是使用回调函数。

    <div wire:ignore>
       <textarea wire:model.defer="description" id="summernote"></textarea>
    </div>

///////////////////////////////////////////// /////////////////////////////////////

<script>
    $('#summernote').summernote({
            placeholder: 'Type something cool',tabsize: 2,height: 400,focus: true,toolbar: [
              ['font',['bold','underline','clear']],['para',['paragraph']],['insert',['picture','video']],],callbacks: {
                onChange: function(e) {
                      @this.set('description',e);
                },}
        });
</script>

这使用了 jQuery，而且如果您的 livewire 属性仍然与您的编辑器不同步，那么您需要从您的 livewire 组件为上面的这个编辑器脚本分派浏览器事件。

javascript laravel laravel