javascripteditorfroala

Froala Editor Crashing


When Copy&Paste text and some other cases it crashes. Can't submit form after that.

FroalaEditor Copy&Paste GIF

Here's my javascript params with image uploader:

require('froala-editor/js/froala_editor.pkgd.min');

$(function () {
    'use strict';

    $('.editor').froalaEditor({
        htmlAllowedEmptyTags: ['footnote'],
        heightMin: 400,
        // Set the language code.
        language: 'ru',
        imageUploadParam: 'image_param',
        imageUploadParams: {id: 'my_editor'},
        imageUploadURL: '/admin/froala/upload-image',
        imageUploadMethod: 'POST',
        imageAllowedTypes: ['jpeg', 'jpg', 'png'],
        requestHeaders: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
      

});

And html:

 <div class="col-sm-6">
     <div class="form-group">
        <label for="description">Description</label>
         <textarea class="editor" rows="10" name="description" id="description" required>{{ old('description') }}</textarea>
     </div>
</div>

Solution

  • I'm also facing with your problem, and today I had a trick to handle it.

    You can refer my answer for my question on StackOverflow here

    I guess you've use CSS to hide the unlicense banner of Froala, so it will be crash after model changed 11 times. This is my simple demo to detect this problem https://stackblitz.com/edit/react-froala-editor?file=style.css.

    div.fr-wrapper>div>a {
            /* display: none !important; */
            /* position: fixed; */
            /* z-index: -99999 !important; */
        font-size: 0px !important;
        padding: 0px !important;
        height: 0px !important;
    }
    

    In the CSS code, if we use display: none, it will be crash after 11th change. You can try if you use display: none, after you edit, it will crash after 11 times.

    I found a trick how to handle this problem, I don't hide banner, but I set it is invisible by font-size: 0 and padding: 0 as my code above.