Tinymce 4 + AlpineJS，x-model 值未更新

Question

我正在使用 Laravel + AlpineJS 开发发票/估算模块。估算/发票屏幕可以选择从现有产品数据库动态添加行以及手动添加行。动态添加的行包含商品标题、商品描述、数量、价格等。这些行也可以排序。

对于项目描述，我正在使用 TinyMCE4，它现在产生了问题。模板代码看起来像

<template x-for="(estimate, index) in items" :key="index">
    <section class="estimate-items  " :x-ref="index" @dragstart="dragstart($event)"
        @dragend="$event.target.setAttribute('draggable', false)" @dragover="updateListOrder($event)"
        draggable="false" class=" odd:bg-gray-900 even:bg-gray-800"
        :class="{
            'border-2 border-lime-400': indexBeingDragged == index,
        }">

        <div class="flex relative -mx-1 p-2 border-b border-l border-r  border-dashed dark:border-gray-700  "
            :class="{ 'pointer-events-none': indexBeingDragged }">

            <div class="px-1 w-12 text-right">
                <div class="relative" aria-haspopup="true">

                    <button aria-label="Sorting menu" @mousedown="setParentDraggable(event)"
                        @mouseup="openContextMenu($event)" @click="openContextMenu($event)"
                        @click.away.stop.prevent="closeAllContextMenus()"
                        @keydown.space="openContextMenu($event)" @keyup.stop.prevent
                        @keydown.arrow-down="highlightFirstContextButton($event)"
                        @keydown.tab="closeAllContextMenus()" @dragover.stop.prevent
                        :class="{ 'focus:outline-none': !usedKeyboard }">
                        MOVE
                    </button>

                </div>
            </div>


            <div class="lg:w-3/6 2xl:4/6 px-1">

                <input required type="text" name="item_title[]"
                    class="bg-gray-800 bg-gray-800 w-full mb-3" x-model="estimate.title">

                {{-- <p class="text-gray-800 dark:text-gray-100" x-text="estimate.name"></p> --}}
                <textarea :id="`descrip_id_${index}`" required type="text" name="item_description[]"
                    class="bg-gray-800 bg-gray-800 w-full item_description h-[198px]" x-model="estimate.desc" :key="index"></textarea>
            </div>


            <div class="px-1 w-9 text-right">
                <a href="#" class="text-red-500 hover:text-red-600 text-sm font-semibold"
                    @click.prevent="deleteItem(estimate.id)">remove
                </a>
            </div>
        </div>

    </section>

</template>

**我在 item_description 文本区域上启动了tinymce4，但编辑器上的更改不会反映在 x-model 值上。 ** 因此，当拖动并排序时，它会显示旧内容，而不是 TinyMCE 中更改的内容。

我在这里尝试了一些功能

setup: function(editor) {
    editor.on('Change Keyup blur', function() {
        editor.save();
    });
} 

但似乎没有任何效果

Answer 1

嗯，据我所知，

x-model

只是用于监听变化事件的语法糖。使用

save()

时，不会调度任何事件。只需应用一个事件：

editor.save();
let event = new Event('change', {bubbles: true});
editor.targetElm.dispatchEvent(event);

如果这不起作用，您可以尝试使用直接绑定的

x-model

layer：

editor.save();
editor.targetElm._x_model.set(editor.getContent());

Answer 2

我终于修好了。正如 @Yinci 提到的，我在 TinyMCE 更新上添加了一个事件，并添加了 .lazy 和 x-model (x-model.lazy="estimate.desc")。由于 x-model 在每次击键时更新属性，默认情况下不会拾取 TinyMCE 更改，为此我们需要添加 .lazy 修饰符，以便当用户焦点离开输入元素时模型将更新

https://alpinejs.dev/directives/model#lazy