Modifying the output of Summernote

While I'm trying to figure out how to modify the HTML that outputs from summernote, I'm looking for an alternative within Laravel.

I saw somewhere that laravel has a feature to with with the elements that was submitted by wysiwyg. I'm not sure if it was from an additional package that I would need to seek out or what but in the code example that I saw, below is how it looked (from memory)

$dom = new \document();

$imgs = $dom->getElementByTag(...)

foreach($imgs as $k => $img)
{
 ...
}

Something like this...

What I essentially want is for every image that the blogger adds to the blog to have a certain class to it to make it fit the site better. Any help here?

If someone knows how to modify it from the summernote end, that would be best, but if that's impossible, I'm going to have to deal with a foreach loop but I need to figure out how this works. Or is there a better way than this? Thanks

Bogey

2 years ago

Best Answer

Level 1

I am using the unisharp/laravel-filemanager and thanks to ChatGPT I've got my answer and the answer, obviously, has nothing to do with laravel... but to keep this discussion complete, I'll include the answer that works perfectly with unisharp/laravel-filemanager in case others are out there that would like to use that filemanager with summernote.

$(document).ready(function() {
    // Define function to open filemanager window
    var lfm = function(options, cb)
    {
        var route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
        window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
        window.SetUrl = cb;
    };

    // Define LFM summernote button
    var LFMButton = function(context) {
        var ui = $.summernote.ui;
        var button = ui.button({
            contents: '<i class="note-icon-picture"></i> ',
            tooltip: 'Insert image with filemanager',
            click: function() {

            lfm({type: 'image', prefix: '/filemanager'}, function(lfmItems, path) {
                lfmItems.forEach(function (lfmItem) {
                    // The HTML that would be generated with our image
                    var imageHtml = '<img src="' + lfmItem.url + '" class="img-fluid">';
                    context.invoke('editor.pasteHTML', imageHtml);
                });
            });

            }
        });
        return button.render();
    };

    $('#postBody').summernote({
        height: 500,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'lfm', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']],
        ],
        buttons: {
            lfm: LFMButton
        }
    });
    
    // Fix for summernote to function somewhat correctly in bootstrap 5.3
    var noteBar = $('.note-toolbar');
    noteBar.find('[data-toggle]').each(function() {
        $(this).attr('data-bs-toggle', $(this).attr('data-toggle'));
    });
});

The javascript above is modified a bit with a fix for bootstrap 5 since summernote doesn't seem to be compatible with bootstrap 5 out of the box. (The drop downs don't work since summernote doesn't use data-bs-toggle).