javascript - Froala 编辑器崩溃

Question

当复制和粘贴文本和其他一些情况时它会崩溃。之后无法提交表单。

这是我的带有图像 uploader 的 javascript 参数:

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')
        }
    })
      

});

和 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>

Answer 1

我也面临着你的问题，今天我有一个技巧来处理它。

可以引用my answer for my question on StackOverflow here

我猜你已经使用 CSS 隐藏了 Froala 的未授权横幅，所以它会在模型​​更改 11 次后崩溃。这是我检测这个问题的简单演示 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;
}

在CSS代码中，如果我们使用display: none，在第11次更改后会崩溃。你可以试试用display: none，你编辑后11次就崩溃了。

我找到了一个如何处理这个问题的技巧，我没有隐藏横幅，但是我通过 font-size: 0 和 padding: 0 设置它是不可见的正如我上面的代码。