Jump to content

How to use more advanced htmlEditor in unigui?


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):






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


     file_browser_callback : "myCustomFileBrowser",          




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

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

on closing the file browser form i do this:

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...