Skip to content

Defining buttons does nothing #6

@mrjokermr

Description

@mrjokermr

Okay strange bug but when I define some tailwindcss utility classes on a parent div of the livewire:jodit-text-editor it will break listening to the specifics that i have defined.

For example:
<div class="w-[900px] max-h-[40rem] overflow-auto border rounded-md"> <div class="relative "> <livewire:jodit-text-editor wire:model.live="content" :buttons="['bold', 'italic', 'underline', 'strikeThrough', '|', 'left', 'center', 'right', '|', 'link', 'image', 'video']" /> </div> </div>

This will make the editor not take the :buttons that i have defined into account.
When i remove the utility classes 'border' and 'rounded-md' it will for some reason only show the buttons that i have defined.

My published vendor/jodit-text-editor file:
`

<textarea id="{{ $joditId }}">{!! $value !!}</textarea>

@script
<script>
let buttons = @JSON($buttons);

    const editor = Jodit.make('#' + @js($joditId), {
        "autofocus": true,
        "toolbarSticky": true,
        "uploader": {
            "insertImageAsBase64URI": true
        },
        "toolbarButtonSize": "medium",
        "showCharsCounter": false,
        "showWordsCounter": false,
        "showXPathInStatusbar": false,
        "defaultActionOnPaste": "insert_clear_html",
        "buttons": buttons,
        "height": '8000px',
        "styleValues": {
            colorBorder: 'white',
        }
    });

    document.getElementById(@js($joditId)).addEventListener('change', function() {
        @this.set('value', this.value);
    });

    window.addEventListener('update-jodit-content', (event) => {
        // Check if this is an array with [editorId, content]
        if (Array.isArray(event.detail) && event.detail.length === 2) {
            const [targetId, newContent] = event.detail;

            // Only update if the editor ID matches this instance
            if (targetId === @js($identifier)) {
                editor.value = newContent;
            }
        } else {
            // Original behavior: update all editors (backward compatibility)
            editor.value = event.detail[0];
        }
    });
</script>

@endscript
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions