Your question makes me understand that it's about Delphi and html should be just the end result. It is not possible to understand the purpose, if Delphi is mandatory or if it can be an application in html itself, since it used the tag bootstrap .
If you want to bring the .rtf document to web platforms but still want to be able to use it with your Delphi application then you can use link which is javascript, see an example with Drag-and-Drop and FileReader API:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="jquery.binarytransport.js"></script>
<link rel="stylesheet" href="jquery.svg.css">
<script src="jquery.svg.min.js"></script>
<script src="../rtf.js"></script>
<script src="../wmf.js"></script>
<script>
function closeDoc(reset) {
$("#havemeta").hide();
$("#meta").empty();
$("#content").empty();
$("#dropzone").show();
$("#closebutton").hide();
$("#tools").hide();
if (reset) {
$("#samplecombo").val("");
}
}
function beginLoading() {
closeDoc(false);
$("#dropzone").hide();
$("#content").text("Loading...");
}
function setPictBorder(elem, show) {
return elem.css("border", show ? "1px dotted red" : "none");
}
function setUnsafeLink(elem, warn) {
return elem.css("border", warn ? "1px dashed red" : "none");
}
function displayRtfFile(blob) {
try {
var showPicBorder = $("#showpicborder").prop("checked");
var warnHttpLinks = $("#warnhttplink").prop("checked");
var settings = {
onPicture: function(create) {
var elem = create().attr("class", "rtfpict"); // WHY does addClass not work on <svg>?!
return setPictBorder(elem, showPicBorder);
},
onHyperlink: function(create, hyperlink) {
var url = hyperlink.url();
var lnk = create();
if (url.substr(0, 7) == "http://") {
// Wrap http:// links into a <span>
var span = setUnsafeLink($("<span>").addClass("unsafelink").append(lnk), warnHttpLinks);
span.click(function(evt) {
if ($("#warnhttplink").prop("checked")) {
evt.preventDefault();
alert("Unsafe link: " + url);
return false;
}
});
return {
content: lnk,
element: span
};
} else {
return {
content: lnk,
element: lnk
};
}
},
};
var doc = new RTFJS.Document(blob, settings);
var haveMeta = false;
var meta = doc.metadata();
for (var prop in meta) {
$("#meta").append($("<div>").append($("<span>").text(prop + ": ")).append($("<span>").text(meta[prop].toString())));
haveMeta = true;
}
if (haveMeta)
$("#havemeta").show();
$("#content").empty().append(doc.render());
$("#closebutton").show();
$("#tools").show();
console.log("All done!");
} catch(e) {
if (e instanceof RTFJS.Error)
$("#content").text("Error: " + e.message);
else
throw e;
}
}
function loadRtfFile(file) {
beginLoading();
$.ajax({
url: file,
dataType: "binary",
processData: false,
success: function(result) {
var reader = new FileReader();
reader.onload = function(evt) {
displayRtfFile(evt.target.result);
};
reader.readAsArrayBuffer(result);
},
error: function(jqXHR, textStatus, errorThrown) {
$("#content").text("Error: " + errorThrown);
}
});
}
$(document).ready(function() {
$("#closebutton").click(function() {
closeDoc(true);
});
$("#dropzone")
.on("drop", function(evt) {
evt.stopPropagation()
evt.preventDefault();
var files = evt.originalEvent.dataTransfer.files;
if (files.length > 1) {
alert("Please only drop one file!");
} else {
var reader = new FileReader();
reader.onload = function(evt) {
beginLoading();
setTimeout(function() {
displayRtfFile(evt.target.result);
}, 100);
};
reader.readAsArrayBuffer(files[0]);
}
})
.on("dragover", function(evt) {
evt.stopPropagation()
evt.preventDefault();
});
closeDoc(true);
});
</script>
</head>
<body>
<div style="margin: 4pt;">
<span>
<form>
<input id="closebutton" type="button" value="Fechar" style="display: none;"/>
</form>
</span>
</div>
<div id="dropzone" style="display: inline-block; border-radius: 6pt; border: 2pt solid #dddddd; padding: 30pt;">
Arraste e solte um arquivo RTF aqui
</div>
<div style="background-color:#f0ffff;display:none;" id="havemeta">
<div>Metadata:</div>
<div id="meta"></div>
</div>
<div id="content"></div>
</body>
</html>
You can use the #content parameter to contenteditable="true" so you can edit the document via html, but you will have to convert it back to .rtf, since it will be in .html so far.
To understand the basics of using it is:
var doc = new RTFJS.Document(blob, settings);
document.getElementById("meu-editor").innerHTML = doc.render();
or
var doc = new RTFJS.Document(blob, settings);
document.getElementById("meu-editor").value = doc.render();
It will depend on the type of editor you use.
