Question

我使用ExtJs4.2.1作为前端，使用asp.net mvc 4作为后端。我的客户有以下要求：

他们想将一堆文件（如.docx文件等）直接复制到extjs的htmleditor中。因此，编辑器中不可避免地会出现丰富的文本和图像的混合，这是一个问题，因为extjs的html编辑器无法直接上传图片。那么，我想知道是否有解决方案呢？我搜索了很多，一些答案将涉及为编辑器添加一个额外的按钮，并弹出一个添加文件面板，让客户插入图像。我认为这有点棘手。我可以在编辑器中过滤掉图片并直接上传而不会弹出另一个选择面板吗？无论如何，有更优雅的方式来做这样的事情吗？

Any help relating this topic will be really appreciated.

Answer 1

虽然我没有尝试过这个，你可以使用TinyMCE，它有一个声称可以执行此操作的插件http://www.tinymce.com/wiki.php/Plugin:paste

TinyMCE https://www.sencha.com/forum/showthread.php?198699-Ext.ux.form.TinyMCETextArea-a-text-area-with-integrated-TinyMCE-WYSIWYG-Editor有一个ExtJS组件。

Answer 2

ExtJs HtmlEditor image upload 

Ext.onReady(function() {
    Ext.create('Ext.window.Window', {
        title: 'Test panel',
        renderTo: Ext.getBody(),
        items: [{
            xtype: 'htmleditor',
            itemId: 'txtBody',
            fieldLabel: 'Body',
            enableFormat: false,
            enableFont: false,
            enableFontSize: false,
            enableColors: false,
            allowBlank: false,
            listeners: {
                render: function(editor) {
                    editor.getToolbar().add({
                        xtype: 'button',
                        text: 'fileIUpload',
                        handler: function() {
                            new Ext.Window({
                                title: 'Image Upload',
                                closable: true,
                                itemId: 'wndImageUpload',
                                height: 120,
                                width: 300,
                                items: [{
                                    xtype: 'form',
                                    itemId: 'frmFileUpload',
                                    fileUpload: true,
                                    items: [{
                                        xtype: 'fileuploadfield',
                                        fieldLabel: 'Select Image',
                                        name: 'Upload',
                                        itemId: 'imgFileUploadField',
                                        labelWidth: '90',
                                        margin: '20 0 0 0'
                                    },

                                    {
                                        xtype: 'button',
                                        text: 'Submit',
                                        scope: this,
                                        margin: '15 0 0 200',
                                        //handler: function (config) {
                                        //    var ns = config.ns;
                                        //    var form = ns.frmFileUpload.getForm();
                                        //    form.submit({
                                        //        url: 'Admin/UploadEmailTemplateImage',
                                        //        success: function (fp, result) {
                                        //            var imagePath = '/Upload/EmailTemplateImage/' + result.result.data);
                                        //            var imageHeight = result.result.imageHeight;
                                        //            var imageWidth = result.result.imageWidth;
                                        //            var html = '<img src="' + imagePath + '" Height= "' + imageHeight + '" Width= "' + imageWidth + '"/>';
                                        //            ns.txtBody.setValue(html);
                                        //            ns.wndImageUpload.hide();
                                        //        },
                                        //        failure: function (fp, result) {
                                        //            Ext.Msg.alert(t('Error'), result.result.message);
                                        //        }
                                        //    });
                                        //}
                                    },

                                    ]
                                }]
                            }).show();
                        }
                    });
                }
            }
        }

        ]
    }).show();
});

Answer 3

将编辑器更改为Ext.ux.form.TinyMCETextArea。创建组件时，请使用具有tinyMCEConfig

的配置对象初始化编辑器的paste_data_images: true参数

ExtJs HtmlEditor图片上传？

3 个答案: