Your question makes me understand that it is about Delphi and html should be just the end result. Can not understand well and what the goal, if Delphi is mandatory or can be an application in html even, since you used the tag bootstrap.
If what you want is to port the document . rtf to web platforms but still want to be able to use with your Delphi application then you can use the https://github.com/tbluemel/rtf.js 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>
<script src="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 on #content the parameter contenteditable="true" and so you can edit the document via html, but you have to convert it back to . rtf, as it will be in . html so far.
To understand the basics of its use 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.
I do not understand what bootstrap has to do with rtf or Delphi, could explain better?
– Guilherme Nascimento
@Guilhermenascimento My html editor uses bootstrap called summernote, it infezlimente has no support for rtftohtml htmltorft conversion.
– Gabriel Rodrigues