ExtJs HtmlEditor圖片上傳？

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