DeveloperBreeze

Wysiwyg Editor Development Tutorials, Guides & Insights

Unlock 1+ expert-curated wysiwyg editor tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your wysiwyg editor skills on DeveloperBreeze.

Tutorial
javascript php

Managing WYSIWYG Editors with Livewire: A Step-by-Step Guide

Include the following JavaScript in your Blade file or in a separate JavaScript file:

    document.addEventListener('livewire:load', function() {
        Livewire.on('elementAdded', (data) => {
            $('.custom-editor').summernote({
                height: 200,
                callbacks: {
                    onPaste: function(contents, $editable) {
                        var pastedText = contents;
                        var wireId = $(this).data('wire-id');
                        if (wireId) {
                            Livewire.emit('updateContent', wireId, pastedText);
                        }
                        return false;
                    },
                    onChange: function(contents, $editable) {
                        var typedText = contents;
                        var wireId = $(this).data('wire-id');
                        if (wireId) {
                            Livewire.emit('updateContent', wireId, typedText);
                        }
                    }
                }
            });
        });
    });

Aug 14, 2024
Read More