Chat and textarea formatting

Wed Feb 15 13:46:06 EST 2023

What is the "junk" you're seeing for apostrophes? Could it be the 
Unicode number or character entity?

RE lost styles, like bold and color, are those rendered in the editable 
field before obtaining the innerHTML?

I find that a lot of this boils down to the Clipboard more than a 
browser being able to know what it's rendering.

If you can see it, it should be in the innerHTML.

But sometimes copying styled text may not carry all information over in 
the Clipboard.  What you see when pasting will show you what came over 
in an HTML-renderable way.

Below is a new page with two new output fields: the first is a textArea 
showing the raw HTML, the second shows the var contents rendered.

I also included some sample text up top, and did some stylings inline 
with others using CSS.  On this page both carry over well, because this 
page includes the CSS classes needed for referenced rendering.

For thorough testing you'll want to also make some styled text in 
another program, like a word processor, and paste that in to see what 
happens.

When I do that here using styled text made in LibreOffice Write 
everything shown in the paste field is accurately rendered in the final 
output field.

--
  Richard Gaskin
  Fourth World Systems

Rick Harrison wrote:
> Hi Richard,
> 
> It takes care of the line spacing problem fine which is good!
> 
> It doesnt like apostrophes in words, and returns garbage for that.
> 
> It doesnt keep any bold facing or text coloring information.
> 
> Thanks for this suggestion.
> 
> Rick

-----------------------------

<!DOCTYPE html>
<htmtl>
<head>
<script>
function GetContents() {
	var tFldMainHTML = document.getElementById("fldMain").innerHTML
	// alert( tFldMainHTML );
	var tFldOutRaw = document.getElementById("fldOutRaw");
	tFldOutRaw.innerHTML = tFldMainHTML;
	var tFldOutRendered = document.getElementById("fldOutRendered");
	tFldOutRendered.innerHTML = tFldMainHTML;
}
</script>
<style>
#fldMain {
	border: 1px solid blue;
	padding: 4px;
	width: 400px;
	height: 200px;
	overflow: scroll;
}
[contenteditable] {
	outline: 1px solid blue;
}
.Colorized {
	color: yellow;
	background-color: darkgreen;
}
.fldOutput {
	border: 1px solid lightgray;
	padding: 4px;
	width: 400px;
	height: 200px;
	overflow: scroll;
}
</style>
</head>
<body>
<p>Here&rsquo;s some <b>sample</b> <span style="color:blue;">text</span> 
to <span class="Colorized">copy</span></p>
  <div id="fldMain" contenteditable="true"></div>
  <button type="button" onClick="GetContents();">Show InnerHtml</button>
  <br>
  <p>Output raw HTML:</p>
  <textArea class="fldOutput" id="fldOutRaw"></textArea>
  <br>
  <p>Output re-rendered:</p>
  <div class="fldOutput" id="fldOutRendered"></div>
</body>
</html>