使用外部按钮在froala编辑器中上传图像/视频

时间:2017-01-24 07:05:03

标签: jquery css froala

我正在使用Inline froala编辑器2.4.0,因为要求我隐藏了默认的内联工具栏和快速插入工具栏。我想为图像/视频/文件上传功能分配一个外部按钮。我们有什么方法可以这样做?

1 个答案:

答案 0 :(得分:0)

您可以在页面上放置一个隐藏文件上传按钮,并将其事件绑定到您的自定义按钮。

$.FroalaEditor.DefineIcon('uploadVideo', { NAME: 'file-video-o' }); $.FroalaEditor.RegisterCommand('uploadVideo', { title: 'Upload Video File', focus: false, undo: true, refreshAfterCallback: false, callback: function (e, editor) { $('[data-cmd="' + e + '"].fr-blink').closest('.fr-box').nextAll('textarea:first').addClass('activeFrbox'); $('#uploadVideo').click(); } });

在此之后,您可以为文件上传创建一个单击事件,并在其上调用您想要的任何内容。

$(document).off('change', '#uploadVideo');
    $(document).on('change', '#uploadVideo', function () {
        if ($(this).val() != '') {
            $('#loadingWithBG').show();
            setTimeout(function () {
                UploadVideoFile();
            }, 100);
        } else {
            $('.activeFrbox').removeClass('activeFrbox');
        }
    });

这是我添加和使用外部按钮的方式。