Jump to content

How to use more advanced htmlEditor in unigui?


ChenHaibin

Recommended Posts

How to add a picture upload function?

 

You can buy a file manager (file browser and uploader) on http://www.tinymce.com/index.php (but i think it needs PHP on server) or you can make your custom file browser (with UniGui):

 

http://www.tinymce.com/wiki.php/Configuration3x:file_browser_callback

 

http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_a_custom_file_browser

 

There you can upload (TUniFileUpload) and/or browse your files to/on the server.

 

 

I have added this to my script/init for including TinyMCE (adds a button to file/image dialog for calling my file browser):

<script type="text/javascript">

  function myCustomFileBrowser(field_name, url, type, win) {

    //z-Order of tinyMCE popup dialog must be less than uniGui modal dialog: 
    document.getElementById('mceModalBlocker').style.zIndex = 7001;
    document.getElementById('mceModalBlocker').previousSibling.style.zIndex = 7002;

    //"save" fieldname for later update:
    TinyMceFileSrcFld = win.document.forms[0].elements[field_name];

    //Start my UniGui FileBrowser:
    ajaxRequest(MainForm.form, 'FileBrowser', [
      'URL=' + url,
      'Typ=' + type
    ]);  
    
  }

  ...  
  
  tinyMCE.init({

     ...
     
     file_browser_callback : "myCustomFileBrowser",          

     ...

  });

</script>

on MainForm i have this (on AjaxRequest start file browser form):

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string; Params: TStrings);
begin
  if EventName = 'FileBrowser' then begin
    frmFileBrowser.URL := Params.Values['URL'];
    frmFileBrowser.Typ := Params.Values['Typ'];
    frmFileBrowser.ShowModal;
  end;
end;

on closing the file browser form i do this:

procedure TfrmFileBrowser.UniFormClose(Sender: TObject; var Action: TCloseAction);
begin
 if ModalResult = mrOK then begin
   UniSession.AddJS('TinyMceFileSrcFld.value = ' + QuotedStr(FileURL) + ';');
 end;
end;

In the future i plan to use Data URI scheme to include the image in the HTML itself.

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...