я не могу передавать данные с помощью своего кода. как я могу это сделать? Я перепробовал много редакторов, но ни один из них не работал должным образом.

 <div wire:ignore>
    <textarea wire:model="content" id="editor"></textarea>
    <script>
        CKEDITOR.replace('editor', {
            // Define the toolbar groups as it is a more accessible solution.
            toolbarGroups: [{
                "name": "basicstyles",
                "groups": ["basicstyles"]
            },
                {
                    "name": "links",
                    "groups": ["links"]
                }
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                @this.set('content', contents);
                }
            },
            // Remove the redundant buttons from toolbar groups defined above.
            removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,Specialchar,Blockquote'
        });
    </script>
</div>
 

Я покажу вам две мои версии.

1. Ванильный Javascript.

    <div wire:ignore>
     <textarea id="description" wire:key="ckeditor-1">{{ $description }}</textarea>
     <script>
         CKEDITOR.replace('description');
         CKEDITOR.instances.description.on('change', function() {
             @this.set('description', this.getData());
         });
     </script>
   </div>
    

@this.set непрерывно отправляет данные о каждом событии изменения. Вы можете использовать событие «размытие» вместо изменения. Но я столкнулся с проблемой, когда пользователь заполняет область CKEditor и сразу нажимает кнопку отправки. Тогда свойство не будет установлено.

Кстати, вы можете видеть, я вообще не использую wire:model, потому что вместо этого @this.set выполняет работу. Я использую wire: key (особенно для игнорируемых частей, замененных сторонними библиотеками), но большую часть времени будет работать даже без wire: key.

2. AlpineJS

Причина, по которой я использую версию AlpineJS, заключается в следующем: я не хочу, чтобы мои CKEditors синхронизировались с внутренними свойствами при каждом изменении. В версии Alpine я правильно использую wire:model и могу использовать wire:model.defer (что приводит к отправке данных при следующем сетевом запросе — при отправке формы).

 <div wire:ignore>
  <textarea id="description"
    wire:model.defer="product.description"
    wire:key="ckeditor-1"
    x-data
    x-init="
      CKEDITOR.replace('description');
      CKEDITOR.instances.description.on('change', function() {
        $dispatch('input', this.getData());
      });"
  >
    {{ $description }}
  </textarea>
</div>
 

Это также связано с событием ‘change’ CKEditor. Вспомогательная директива Alpine $dispatch синхронизирует / отправляет данные CKEditor со свойством wire:model .

Если вы используете wire:model без отсрочки, данные будут синхронизироваться с каждым изменением в CKEditor — аналогично ванильной версии JS.

для CKEDITOR-5

 <form wire:submit.prevent="SendMail" enctype="multipart/form-data">
    @csrf
    <div wire:ignore class="form-group row">
        <x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
        <div class="col-md-9">
            <textarea wire:model="message" data-message="@this" class="form-control required" name="message"
                id="message"></textarea>
            <x-error-message :value="__('message')" />
        </div>
    </div>
    
    <button wire:loading.attr="disabled" type="submit"
        class="btn btn-primary float-right" id="submit">Create</button>
</form>

 

Скрипты

 <script>
    ClassicEditor
        .create(document.querySelector('#message'))
        .then(editor => {
            editor.model.document.on('change:data', () => {
                     const textareaValue = $('#message').data('message');
                     eval(textareaValue).set('message', editor.getData());
            })
        })
        .catch(error => {
            console.error(error);
        });
</script>
 

ИЛИ альтернативные сценарии, во время события щелчка

 <script>
    ClassicEditor
        .create(document.querySelector('#message'))
        .then(editor => {
            document.querySelector('#submit').addEventListener('click', () => {
                let textareaValue = $('#message').data('message');
                eval(textareaValue).set('message', editor.getData());
            })
        })
        .catch(error => {
            console.error(error);
        });
</script>
 

Примечание: не забудьте добавить data-message="@this" textarea тег. Оба скрипта работают, вы можете выбрать все, что захотите.