SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quotes in onClick

    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
    Code:
    ','
    ','body')">
    Tried
    Code:
    class=edleft --- works
    class="edleft" --- errors 
    class=\"edleft\" --- errors
    This is what I have now:
    One of the JS button and the doAddTags function.
    Code:
    // 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. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wondering if what you really need to do is

    class=\\\"edleft\\\"

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    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. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put together this little test html page


    Code HTML4Strict:
    <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=&quot;edleft&quot; solves the problem

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Philip, The quote entity works, I also tried out a numbered entity (#34) and that works too

    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •