Tinymce添加文件选择按钮以添加链接

时间:2017-08-29 00:10:08

标签: javascript tinymce tinymce-4 tinymce-plugins

我想添加一个触发按钮,将图像上传为数据。所以我添加了以下代码

<textarea id="test"></textarea>
<input name="image" type="file" id="test-upload" class="hidden" onchange="">

tinymce.init({
            selector: '#test',
            ...,
            paste_data_images: true,
            image_advtab: true,
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'image') {
                    jQuery('#test-upload').trigger('click');
                    jQuery('#test-upload').on('change', function() {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function(e: any) {
                            callback(e.target.result, {
                                alt: ''
                            });
                        };
                        reader.readAsDataURL(file);
                    });
                }
            },
            ...
        });

这是按预期工作的。我正在为图像获取文件选择器,如下所示

enter image description here

但是当我尝试添加链接时,我也得到了这个文件选择器。 enter image description here

如何避免这种情况?

1 个答案:

答案 0 :(得分:5)

file_picker_types设置添加到您的配置中,并指定应使用选择器的位置。

https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types

默认为:

file_picker_types: 'file image media'

...但您可以将其更改为:

file_picker_types: 'image media'

...此时,文件(链接)不会显示选择器。