В UniGUI стандартный UniHtmlMemo не позволяет добавлять изображения в HTML текст, так как сначала они должны быть загружены на сервер, и лишь потом отображаться у клиента в браузере. В данном посте посмотрим как это можно сделать. Суть доработки в том, что мы добавим кнопку на тулбаре HTML Editor. И через неё будем загружать изображение.
Данная тема была поднята мной на форуме UniGUI и лучший ответ дал DD.
1. Добавим на форму UniHTMLMemo1 и UniFileUpload1
2. UniHTMLMemo1 -> ClientEvents -> UniEvents -> add function beforeInit:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function beforeInit(sender, config) { config.listeners = { render: function(editor) { editor.getToolbar().add({ xtype: 'button', text: 'imageUpload', handler: function() { ajaxRequest(sender, 'uploadImage', []) } }); } } } |
На данном шаге мы просто добавили кнопку в тулбар editor и присвоили ей обработчик – функцию отправки запроса AjaxEvents.
3. UniHTMLMemo1 -> OnAjaxEvent:
|
1 2 3 4 5 6 7 8 |
procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string; Params: TStrings); begin if EventName = 'uploadImage' then begin UniSession.AddJS('Ext.get("'+ UniHTMLMemo1.JSName +'_id-inputCmp-iframeEl").focus()'); UniFileUpload1.Execute; end; end; |
4 UniFileUpload1 -> OnCompleted:
|
1 2 3 4 5 6 7 8 9 10 11 |
procedure TMainForm.UniFileUpload1Completed(Sender: TObject; AStream: TFileStream); var DestName : string; DestFolder : string; begin DestFolder:=UniServerModule.StartPath+'UploadFolder\'; DestName:=DestFolder+ExtractFileName(UniFileUpload1.FileName); CopyFile(PChar(AStream.FileName), PChar(DestName), False); UniSession.AddJS(UniHTMLMemo1.JSName + '.execCmd(''InsertHTML'', ''<img width="138" height="87" src="'+ 'UploadFolder/' + UniFileUpload1.FileName +'"></img>'')'); end; |
5 MainForm -> OnCreate:
|
1 2 3 4 |
procedure TMainForm.UniFormCreate(Sender: TObject); begin ForceDirectories(UniServerModule.StartPath+'UploadFolder'); end; |
6
|
1 |
uses ... ServerModule ... |