How to open and save files: a basic HTML editor in your publications

This sample shows how to work with JQuery, JavaScript and HEScript to create a working basic HTML editor. For instance, you can load, edit and save files directly from a compiled publication.

Working Example

Choose Save As to save the contents of the text editor to an external HTML file. You will be prompted for the filename.

After that, you can load contents from an existing HTML file with Load.

Behind the scene

The WYSIWYG editor is powered by a WYSIWYG JavaScript editor and jQuery.

We use the following JavaScript code:

<script src="editor.js" type="text/javascript"></script>

<script type="text/javascript">

var curText = window.external.GetGlobalVariable('datatoload', 
'Type <b><em>here</em> what you want</b>...');

function savetofile()
{
editor1.prepareSubmit();
curText = $('#editor1_content').val(); 
window.external.SetGlobalVariable('datatosave', curText, false);
window.external.runHEScriptCom("UserMain.SaveFile");
}

function loadfile()
{
editor1.prepareSubmit();
curText = $('#editor1_content').val(); 
window.external.SetGlobalVariable('datatoload', curText, false);
window.external.runHEScriptCom("UserMain.LoadFile");
window.location.reload();
}

</script>

The BODY tag contains:

<script type="text/javascript">
var editor1 = new WYSIWYG_Editor('editor1', curText);
editor1.display();
</script>

<input name="BSave" type="button" value="Save As" onclick="savetofile()" />
<input name="BLoad" type="button" value="Load..." onclick="loadfile()" />

When the end user clicks Save As, the JavaScript code saves the textarea’s contents to a global variable and call the following HEScript script:

uses Classes;  // Add this to the top of the script

procedure SaveFile;
var
SF, S: String;
T: TStringList;
begin
// Retrieves the data saved by the JavaScript.
S := GetGlobalVar("datatosave", "");
if S = "" then exit;
// Asks for filename
SF := SaveFileDialog("Save Text As", "*.htm", "*.htm", "HTML Files (*.htm)|*.htm|All files (*.*)|*.*", "");
if SF = "" then exit; // User cancelled.
// Saves to a file
T:= TStringList.Create;
T.Text := S;
T.SaveToFile(SF);
T.Free;
end;

When the end user clicks Load, the JavaScript code calls the following HEScript script and then refreshes the page:

procedure LoadFile;
var
SF, S: String;
T: TStringList;
begin
// Ask which file to open.
SF := OpenFileDialog("Open HTML file", "*.htm", "*.htm", "HTML Files (*.htm)|*.htm|All files (*.*)|*.*", "");
if SF = "" then exit; // User cancelled.
T:= TStringList.Create;
T.LoadFromFile(SF);
S := T.Text;
T.Free;
// Sets to the new one, that will be used when reloading the page.
SetGlobalVar("datatoload", S, false);
end;

Introduction to Scripting

Using the Script Manager

Script Function Reference

Copyright G.D.G. Software 2019. All rights reserved