How to use more advanced htmlEditor in unigui?

[ChenHaibin]

How to use more advanced htmlEditor, such as http://extjs.org.cn/extjs/plugins/HTMLEditor/image/index.html

 

Thank you!

[gerhard.kimmeringer]

Look here http://forums.unigui.com/index.php?/topic/1851-tinymce-in-unigui-applications/

 

Hope it help you.

[ChenHaibin]

Look here http://forums.unigui.com/index.php?/topic/1851-tinymce-in-unigui-applications/

 

Hope it help you.

However, this control can not upload pictures.

[ChenHaibin]

How to add a picture upload function?

[Oliver Morsch]

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.