CODEWITHSUNDEEP
javascripteditorfroala
EXayer
EXayer

Reputation: 140

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>

Upvotes: 2

Views: 818

Answers (2)

khaled saleh
khaled saleh

Reputation: 518

it seems that you are hiding the licensing red div

in order to fix this error just add the following style to your code

a[href='https://www.froala.com/wysiwyg-editor?k=u'] {
        font-size: 0px !important;
        padding: 0px !important;
        height: 0px !important;
}

Upvotes: 0

Rom
Rom

Reputation: 1838

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.

Upvotes: 1

Related Questions