Есть ли правильный способ подключить редактор Trix к Livewire?

При подключении контента редактора Trix к Livewire я сталкиваюсь с проблемами. Я считаю, что проблема в том, что когда Livewire получает контент от Trix, контент выгружается, и Trix отключается. Есть ли способ лучше?

То, что я сделал, работает следующим образом. На данный момент страница перенаправлена ​​сама на себя, чтобы перезагрузить Trix (побеждает весь смысл Livewire, но он также используется для других целей).

<div>
  <input
      id="newCommentTextTrixContent"
      type="hidden"
      wire:model="newCommentText"
  >

  <trix-editor
      id="newCommentTextTrixEditor"
      input="newCommentTextTrixContent"
  ></trix-editor>


  <button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>

я пытался

  • провод: модель на скрытом входе - ничего не происходит
  • x-on:trix-change="$set('comment', $event.target.innerHTML) - это работает, но Трикс становится серым и перестает работать после первого нажатия клавиши (проблема с перезагрузкой?)

Я уверен, что что-то вроде последнего лучше, но с Триксом как-то каждый раз как-то перезагружается. Все это кажется немного запутанным, поэтому вопрос в том, как это сделать правильно?

Источник

5 ответов

Решение

У меня все заработало. Возможно, вам понадобится последняя версия Livewire, чтобы это работало, но код примерно такой.

    <div wire:ignore>
        <trix-editor
            class="formatted-content"
            x-ref="trix"
            wire:model.debounce.999999ms="newCommentText"
            wire:key="uniqueKey"
        ></trix-editor>
    </div>

Почему это работает?

  • Тебе нужно wire:ignore на родительском узле, потому что Trix вставляет панель инструментов над текстовой областью. wire:ignore не позволяет Livewire беспокоиться об этом и, следовательно, не удалять и не вмешиваться в него в следующем цикле.
  • Вам нужен wire:key, потому что DOM немного перемещается, и это помогает Livewire отслеживать его.
  • Я предлагаю длинный дебаунс, который является хакерским приемом .lazyмодификатор не работает с текстом. Кроме того, мучительно ждать Ajax при каждом нажатии клавиши.

Вот и все. Я использую это выше, чтобы многократно отправлять комментарии в конец потока комментариев, и, похоже, все работает нормально. Удачи!

Обратите внимание, у меня также есть CKEditor, работающий аналогично, как описано здесь.

Источник

Как расширение ответа @Kurucu и комментария под ним от @Rehan;

Кажется, это работает очень хорошо. Но когда я применяю такие стили, как li или жирный, он не сохраняется в wire: model. Пример:<div>foo<br>bar<br>foobar</div>Я применил пули, теги отсутствуют. Вы столкнулись с этой проблемой? - Рехан

Чтобы решить проблему отсутствия обновленного значения при нажатии кнопок, выделенных жирным шрифтом, курсивом или цитатой, например, добавьте следующую часть в редактор трикс (обратите внимание на x-on:trix-change="$dispatch('input', event.target.value)"):

<div wire:ignore>
    <trix-editor
        class="formatted-content"
        x-data
        x-on:trix-change="$dispatch('input', event.target.value)"
        wire:model.debounce.1000ms="newCommentText"
        wire:key="uniqueKey"
    ></trix-editor>
</div>
Источник

Вышеупомянутый вариант работает, но я не получал данные из моего поля. Вот что сработало для меня с небольшой настройкой, используя AlpineJSх @entangle. Ниже мое рабочее решение:

      <div class="mb-2" x-data="{ description: @entangle('description').defer }"

             x-init="$watch('description', function (value) {
                        $refs.trix.editor.loadHTML(value)
                        var length = $refs.trix.editor.getDocument().toString().length
                        $refs.trix.editor.setSelectedRange(length - 1)
                        }
                    )" wire:ignore>

            <label class="form-label">Job Description <span class="text-danger">*</span></label>
            @error('description')
            <span class="error d-inline-block"><i class="mdi mdi-alert-circle"> </i> {{$message}}</span>
            @enderror
            <input name="description" id="description" type="hidden" x-model="description">
            <div x-on:trix-change.debounce.1000ms="description = $refs.trix.value">
                <trix-editor x-ref="trix" input="description" class="overflow-y-scroll"
                             style="height: 20rem;"></trix-editor>
            </div>
        </div>
Источник

Я заставил его работать, используя встроенные события Trix.

<input id="about" name="about" type="hidden" value="{{ $about }}">
<trix-editor input="about" class="wysiwyg-content"></trix-editor>

<script>
    var about = document.getElementById("about")

    addEventListener("trix-change", function(event) {
        console.log(about.getAttribute('value'));
        @this.set('about', about.getAttribute('value'))
    })
</script>
Источник

Сделал хорошую запись, объясняющую, как создать редактор Laravel Livewire Trix здесь: https://devdojo.com/tnylea/laravel-livewire-trix-editor-component

Надеюсь, это поможет 🙌

Источник
Другие вопросы по тегам