ExtJs HtmlEditor图片上传？-Java 学习之路

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

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

Any help relating this topic will be really appreciated.

2 回答

0

虽然我没试过这个你可以使用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组件 .

回复于 2024-04-26T22:50:40+08:00

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();
});

回复于 2024-04-26T22:50:40+08:00

ExtJs HtmlEditor图片上传？

2 回答

相关问题