Quotes in onClick

JavaScript
1

Hi, I have a JS HTML editor (not a WYSIWYG) that I downloaded and it works fine, except that any input with quotes causes it to break. I need the quotes for things like HTML and CSS classes etc.

If I have quotes inside the onClick, it fails completely with an Object expected error. If the quotes are escaped with a \, I get an “unterminated string constant” error, with this showing where a button should be


','
','body')">

Tried


class=edleft --- works
class="edleft" --- errors 
class=\\"edleft\\" --- errors

This is what I have now:
One of the JS button and the doAddTags function.


// the button code (example)
document.write("<img class=\\"edbutton\\" src=\\"/rail/edim/lft.gif\\" name=\\"btnCode\\" title=\\"Align left\\" onClick=\\"doAddTags('<div class=edleft>','</div>','" + obj + "')\\">");

// the bit that handles the onClick
function doAddTags(tag1,tag2,obj) {
textarea = document.getElementById(obj);
 // Code for IE
 if (document.selection) {
 textarea.focus();
 var sel = document.selection.createRange();
 //alert(sel.text);
 sel.text = tag1 + sel.text + tag2;
 } else { 
 // Code for Mozilla
 var len = textarea.value.length;
 var start = textarea.selectionStart;
 var end = textarea.selectionEnd;
 var scrollTop = textarea.scrollTop;
 var scrollLeft = textarea.scrollLeft;
 var sel = textarea.value.substring(start, end);
 //alert(sel);
 var rep = tag1 + sel + tag2;
 textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
 textarea.scrollTop = scrollTop;
 textarea.scrollLeft = scrollLeft;
 }}

I hope someone can help on this as I’m not much on Javascript and a solution would allow me a lot more scope for button handling in the editor.

Thanks in advance - Ted

2

Wondering if what you really need to do is

class=\\\“edleft\\\”

3

Do you have a link to where we can see the code in action as normally when it returns an error such as “Object expected” its associated with another part of the code trying to be executed.

4

Hi Philip, that gave me the same result as the broken body bit.

SgtLegend
I’ve only just got back in after a day away and it’s near on midnite in London, so what I’ll do it stick up a mock thing tomorrow and get back to you.

  • Ted
5

I would have to redo an entire Perl back end to put up a mock blog for this. What Ill do is post an example of the editor here.

var textarea;
var content;
document.write("<link href=\\"/blog/eezy.css\\" rel=\\"stylesheet\\" type=\\"text/css\\">");
// ---- toolbar ---- uncomment (do return) to show button
function edToolbar(obj) {
// ---- Bold --- 
document.write("<img class=\\"edbutton\\" src=\\"/blog/edim/bol.gif\\" name=\\"btnBold\\" title=\\"Bold\\" onClick=\\"doAddTags('<b>','</b>','" + obj + "')\\">");
// ---- Italic --- 
document.write("<img class=\\"edbutton\\" src=\\"/blog/edim/ita.gif\\" name=\\"btnItalic\\" title=\\"Italic\\" onClick=\\"doAddTags('<i>','</i>','" + obj + "')\\">");
// ---- Quote --- This one and the code have CSS classes the need working quotes
document.write("<img class=\\"edbutton\\" src=\\"/blog/edim/quo.gif\\" name=\\"btnQuote\\" title=\\"Quote\\" onClick=\\"doAddTags('<b>Quote</b><div class=codebox>','</div>','" + obj + "')\\">"); 
// ---- Code ---
document.write("<img class=\\"edbutton\\" src=\\"/blog/edim/cod.gif\\" name=\\"btnCode\\" title=\\"Code\\" onClick=\\"doAddTags('<b>Code</b><div class=codebox><code>','</code></div>','" + obj + "')\\">");
// ---- end toolbar

// ---- Code to handle general buttons
function doAddTags(tag1,tag2,obj) {
textarea = document.getElementById(obj);
 // Code for IE
 if (document.selection) {
 textarea.focus();
 var sel = document.selection.createRange();
 //alert(sel.text);
 sel.text = tag1 + sel.text + tag2;
 } else { 
 // Code for Mozilla Firefox
 var len = textarea.value.length;
 var start = textarea.selectionStart;
 var end = textarea.selectionEnd;
 var scrollTop = textarea.scrollTop;
 var scrollLeft = textarea.scrollLeft;
 var sel = textarea.value.substring(start, end);
 //alert(sel);
 var rep = tag1 + sel + tag2;
 textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
 textarea.scrollTop = scrollTop;
 textarea.scrollLeft = scrollLeft;
 }}

I am guessing, but it may be that the “doAddTags” function needs something coded in to parse onClick for the button.

So we are looking to make class=codebox into class=“codebox”

6

I put together this little test html page

<html>
<head>
<style type="text/css">
.edleft {
	color: red;
}
</style>
</head>
<body>
<script type="text/javascript">

function announce (a, b, c) {
	var div = document.createElement("div");
	div.innerHTML = a + b + '<p><b>' + c + '</b></p>';
	document.body.appendChild(div);
}

var obj = 'bodyid';

var htmlstr = "<img class=\\"edbutton\\" alt=\\"Left\\" src=\\"lft.gif\\" name=\\"btnCode\\" title=\\"Align left\\" onClick=\\"announce('<div class=&quot;edleft&quot;>The rain in spain','</div>','" + obj + "')\\">";
document.write(htmlstr);

</script>
</body>
</html>

It would seem to indicate that class="edleft" solves the problem

7

Thanks Philip, The quote entity works, I also tried out a numbered entity (#34) and that works too :slight_smile:

I use numbered entities throughout as EezyBlog (the blog script I’ve written) is aimed at programmers and I wanted to handle all the ASCII characters that would work for non-English browsers as well.

Some quick tests saw the correct " in my entries and database.

Thanks very much - Ted