Jump to content

CKEditor+elFinder in UniGUI, possible?


elGringo

Recommended Posts

Hello everyone here! I'm going to create web application that should keep records in database as (X)HTML format with pictures. In each record will be HTML text + <img src="some link to the image on the server">

 

The question is how to organize it, using UNIGUI that seems to be best framework for the Web on the Delphi Language.

 

In demos I've seen HTMLEditor (http://prime.fmsoft.net/demo/htmled.dll) but it doesn't have function of uploading files (pictures).

 

I tried to take a look at CKEditor+elFinder - so it's good variant to integrate it in some HTML page - but how to integrate it in UNIGUI and use after? Besides CKEditor script need Apache as i understood, so UniGui should be started under Apache for Windows?

 

So many difficulties for the moment. Does anyone know simple decision for the task (uploading files to the server and getting link to paste it like <img...>)?

 

 

Best Regards, Stanislav

Link to comment
Share on other sites

Hi,

 

Perhaps this decision is not completely consistent your requirements, but try...

 

1. Add the following components: UniHTMLMemo1, UniFileUpload1

 

2. UniHTMLMemo1 -> ClientEvents -> UniEvents -> add function beforeInit:

function beforeInit(sender, config)
{
  config.listeners = {
    render: function(editor) {
              editor.getToolbar().add({
                 xtype: 'button',
                 text: 'imageUpload',
                 handler: function() {
                   ajaxRequest(sender, 'uploadImage', [])   
                 }
              });
             }
    }
}

3. UniHTMLMemo1 -> OnAjaxEvent:

procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'uploadImage' then begin
    UniFileUpload1.Execute
  end;
end;

4. UniFileUpload1 -> OnCompleted:

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:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  ForceDirectories(UniServerModule.StartPath+'UploadFolder');
end;

6.

uses ... ServerModule ...

Try,

Best regards.

  • Like 1
Link to comment
Share on other sites

Delphi Developer, is function beforeInit in your example is written in javascript or some C-kind language? If so where should it be in UniGui Project?

Also to avoid lot's of questions - could you be so kind and attach your example project here?

 

Regards, Stanislav

Link to comment
Share on other sites

As promised writing here result - test almost successful! Why almost - it uploads pics only from the second try.

So if i upload pic 1 time happens nothing, if second time and the same - it works - if different pic - happens nothing.

What could it be? 

 

 

post-2378-0-42428100-1444942406_thumb.jpg

Link to comment
Share on other sites

Delphi Developer, according to your experience, continuing the theme - is it possible to create something like elFinder in UniGui using only Delphi code (see picture attached)?

 

I mean - tool that will show which folders on the server we have, choose one of them, and after choosing create link to uploaded file (picture)  right to the folder chosen on server).

 

So if shortly i want to upgrade your example with the possibility of choosing diectory on the server, but i'm not sure if it's possible in UniGui by using only Delphi code or not.

 

Best Regards, 

post-2378-0-59156500-1445022517_thumb.jpg

Link to comment
Share on other sites

Ok! I understand and realize that's complicated and big task. But i asked because for the moment i feel myself better in Delphi code rather than in javascript and wanted to evaluate difficulty of task for myself - for example - if there is a lot of javacript - it will be difficult for me and conversely.

 

Anyway, thank you for the answer. Also i'm going to create such theam ( thread ) in "Feature requests" on that forum

Link to comment
Share on other sites

Where is the problem making a file/folder dialog with uniGUI?

- make a new uniform

- You get the folders and files on server with FindFirst()/FindNext() or TDirectory.FindDirectories/TDirectory.FindFiles.

- Put this result in a UniTree and UniListBox or UnistringGrid on the form (with some code for changing and select folder)

- Open this form in "TMainForm.UniFileUpload1Completed" (with callback function)

 

No javscript needed...

Link to comment
Share on other sites

  • 2 weeks later...
Hello Delphi Developer and everyone! 
 
After time i tried to repeat an example and found that in Chrome and Opera picture uploading doesn't work. So it happens nothing when i choose file and press upload. In FF code works excellent! 
 
Also i found that in Chrome and Opera path looks like C:\fakepath\1.jpg and in FF it is just 1.jpg  Does it have any influence?
 
function initialize(sender, eOpts) is added (see attached picture);
 
Project attached.
 

 

post-2378-0-21378400-1446213758_thumb.jpg

178_UniPictureUpload.rar

Link to comment
Share on other sites

After time i tried to repeat an example and found that in Chrome and Opera picture uploading doesn't work. So it happens nothing when i choose file and press upload. In FF code works excellent! 

 
Also i found that in Chrome and Opera path looks like C:\fakepath\1.jpg and in FF it is just 1.jpg  Does it have any influence?

 

Hi,

 

Try:

 

MainForm.Script add:

Ext.form.field.File.override(
     {onFileChange: function() {
       this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
       Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value.replace(/C:\\fakepath\\/g, ''));
       }
     }
)

Best regards.

Link to comment
Share on other sites

DD Thank you! Found something else.

The reason why code didn't work sometimes was focus of UniHTMLMemo!!!

 

When i clicked to UniHTMLMemo before clicking ImageUpload so that caret appear everything works in Chrome, Opera, FireFox!!!

 

So i tried to change code like this

 

procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'uploadImage' then
  begin
    UniHtmlMemo1.SetFocus; // doesn't work with that
    UniFileUpload1.Execute;
  end;
end;

but setfocus doesn't set focus and also webfocus, so how to set focus on UniHTML Memo so that caret would appear?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...