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 doesn’t like apostrophes in words, and returns garbage for that.
It doesn’t 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’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>
_______________________________________________
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
