SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CONTENTEDITABLE Problems

    Hi,

    Using the CONTENTEDITABLE attribute in IE I am building a nice little HTML editor. However I have run across the following 2 problems...

    When dynamically inserting text into an element (in my case a DIV tag) using the innerHTML property it carries out 2 conversions which are very irritating.

    1) It changes things like & --> '& a m p ;' which when used on a link xyz.asp?a=b&c=d isn't helpful

    2) It converts all relative links to absolute (i.e. href="abc.asp" --> href="http://www.hjk.com/abc.asp" which is a real problem because then all the links get tied to the specific host and make the site completely non-portable.

    Any ideas about this? Maybe there is a better way to dynamically load it than innerHTML?

    Thanks,

    Dale

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, yes, there are better tools than innerHTML. However...a couple thoughts on your problem...

    1. Apply escape() on your URLs before using them, so they become URL-encoded.

    2. Maybe truncated absolutes will work? href="/abc.asp"
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Well, yes, there are better tools than innerHTML. However...a couple thoughts on your problem...

    1. Apply escape() on your URLs before using them, so they become URL-encoded.

    2. Maybe truncated absolutes will work? href="/abc.asp"
    Firstly, what is escape()? VBS I guess, in which case what is the JS equivalent?

    And is it different from Server.URLEncode().

    Unless I'm mistaking your suggestion, the & isn't the part that needs encoding?

    Second, didn't make any difference unfortunately. Also I tried using <base href=""> but no luck there either...

    Anyone know a site forum which might have Microsoft people responding?

    Dale
    Last edited by dale_burrell; Oct 16, 2002 at 08:26.

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    escape() IS the javascript funtion...

    encodedURL = escape(nonEncodedURL);

    And, Server.URLEncode() is VBScript

    I would move away from using innerHTML for this. Got a test page up someplace?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    escape() IS the javascript funtion...

    encodedURL = escape(nonEncodedURL);

    And, Server.URLEncode() is VBScript

    I would move away from using innerHTML for this. Got a test page up someplace?
    Server.URLEncode is ASP and works equally under VBS and JS. Actually I think its the same as escape().

    Unfortunately I don't have a test site you can view.

    But the fundamental problem is this: We have to be able to transfer the information back to the server via a form, hence (I think) we need a TEXTBOX. We also provide the ability to switch back and forth between the editable view and the plain text (TEXTBOX) view. Obviously when we switch back and forth we need to transfer the content from one to the other. The only way I know how to do this is with the innerHTML property.

    So if you know a better way it'd be very useful!

    Cheers,

    Dale

  6. #6
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the info you need (not to mention samples that you'd do well to adopt as your starting point) is located here:
    http://msdn.microsoft.com/archive/de...html/cncpt.asp

    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  7. #7
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by M@rco
    All the info you need (not to mention samples that you'd do well to adopt as your starting point) is located here:
    http://msdn.microsoft.com/archive/de...html/cncpt.asp

    That page seems to specify an interface to IE from a programming language such as C++ etc - which isn't quite that same thing as writing HTML from ASP.

    We actually used the MS sample (the relevant one) as a starting point, but found these 2, reletively obscure behaviours that I mentioned early in the thread.

  8. #8
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am astonished to find that the first problem you are encountering also manifests itself in my WYSIWYG editor!!

    Further research on my part has found that all other WYSIWYG editors (that I have tested) also suffer the same problem, and that there is no ready fix.

    Because my project requires the output to be XHTML, not just HTML, earlier this week I wrote an extremely complex HTML parsing library (in ASP) which converts a given block of HTML to XHTML by closes tags, lowercasing all element names & attribute names, and performing other bits of tidying. I therefore intend to add support for converting &amp; back to & in urls to combat this annoying "feature".

    However, I cannot reproduce the second problem you mention, although I have heard of it before.
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  9. #9
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its a complex one...

    I suspect that its something to do with stuffing it in using the innerHTML property, although MS does claim to do something to the links "Automatic detection of hyperlinks and bookmarks (makes them navigable)".

    Luckily we are storing the content in a DB and hence we can parse the contents and change the URL if we change sites.

    Referring the the second problem, the bizaire thing is that the links work with &amp;amp;! How about that.

    Dale
    Last edited by dale_burrell; Oct 17, 2002 at 08:24.

  10. #10
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by dale_burrell
    Referring the the second problem, the bizaire thing is that the links work with &amp;amp;! How about that.
    lol! I was wondering why I hadn't noticed it as a problem before now. (It actually makes perfect sense if I/you think about it, particularly in conjunction with XML.)
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  11. #11
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dale, I checked out the examples in your email, and I see the problem. I believe that it is because you are using a CONTENTEDITABLE enabled DIV rather than the proper DHTMLEd ActiveX control that I use - my WYSIWYG editor (which uses the latter) copes with this fine, as well as making use of some of the more sophisticated features that the DHTML Editing Component provides.

    Grab the samples from the url below and play around with the HTML-based examples:
    http://msdn.microsoft.com/downloads/...l/dhtmsamp.exe
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  12. #12
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fantastic

    OK - so thats all good. Is there an easy way to view/edit the raw HTML so to speak as I was trying to do?

    Next thought... How difficult is this to incorporate as only part of a page (for example a form where only some of the elements are HTML editable).

    Maybe in this case it would be better to open a new window for the editing of specific HTML editable element - in which case how does one pass content from a child (with any luck modal) window back to the parent window. And is it possible for the child window to be modal, i.e. not allow the parent window to be selected before the child is closed?

    Also, (Thinking aloud here) any suggestions as to how to cope with inserting images Hmm maybe parse the text before submisson for images and then upload them all? But what if they already exist? Could I obtain a list of images already on the server to insert? Not easily?

    Dale

  13. #13
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) & 2) - I make mine pop up, and simply have an "Edit" button + hidden field on the form itself. Makes the interface far less cluttered and gives you more space to edit the HTML in. Modal windows are opened with a parameter - use this to pass the hidden field object itself (values passed directly seem to be clipped at 8K or something like that). Then in your HTMLEditor popup, do this:
    Code:
    function tbContentElement_DocumentComplete()
    {
    	if (!initialDocComplete)
    	{
    		var tmp;
    		
    		//avoid error if not opened as a modal dialog
    		if (window.dialogArguments)
    		{
    			tmp = window.dialogArguments.value;
    			
    			if((tmp != null) && (tmp != ''))
    			{
    				SetHTML(tmp);
    			}
    		}
    		else
    		{
    			SetHTML('');
    		}
    	}
    	
    	initialDocComplete = true;
    	docComplete = true;
    }
    
    function SetHTML(code)
    {
    	tbContentElement.DOM.body.innerHTML = ConvertCharsToEntities(tbContentElement.FilterSourceCode(code));
    }
    3) Yes, modal windows can open modal windows, and so on and so forth!!! I use a modal window spawned by the HTMLEditor window to edit the raw HTML code (using a big textbox - this bypasses the the annoying autohyperlinking when editing the code).

    4) I wrote and integrated my own media library, which allows the user to upload/delete/insert media (images/PDFs/Office docs), automatically generating thumbnails, and providing options for image positioning and titling. I suggest you do something similar!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  14. #14
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by M@rco
    1) & 2) - I make mine pop up, and simply have an "Edit" button + hidden field on the form itself. Makes the interface far less cluttered and gives you more space to edit the HTML in. Modal windows are opened with a parameter - use this to pass the hidden field object itself (values passed directly seem to be clipped at 8K or something like that).

    3) Yes, modal windows can open modal windows, and so on and so forth!!! I use a modal window spawned by the HTMLEditor window to edit the raw HTML code (using a big textbox - this bypasses the annoying autohyperlinking when editing the code).

    4) I wrote and integrated my own media library, which allows the user to upload/delete/insert media (images/PDFs/Office docs), automatically generating thumbnails, and providing options for image positioning and titling. I suggest you do something similar!
    I note that you initialise the content of the Edit box using the innerHTML property, just this time on the body rather than an element - I assume that doesn't do the relative --> absolute link conversion we've been talking about? Or is that taken care of my the parser function you wrote?

    I take it the documentcomplete() function is an exisiting function that is over-ridden? Or does it have to be linked in as well?

    Are you saying that I should pass the object, not the object contents (i.e. text) into the modal window?

    Hmmm, I don't quite understand how you save the values back to the WYSIWYG editor from the HTML editor. Also on the original form you say you have a hidden field, so what are you showing the user?

    What do you mean by the "annoying autohyperlinking when editing the code" ?

    Media library looks like a great idea.

    Sorry to be asking so many questions, but I've got such a tight time scale on the project that I can't spend very long playing with this. When I come to do it I've gota get it right first time.

    Thanks again,

    Dale
    Last edited by dale_burrell; Oct 18, 2002 at 09:04.

  15. #15
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) I am not compensating for any relative-->absolute link conversions - they just don't seem to happen (for whatever reason)!!

    2) documentcomplete is an event which the DHTMLEd control fires when it has finished initialising, and so tbContentElement_DocumentComplete() is the handler for it.

    3) Yes, pass the object. Passing the HTML code as a simple string has unreliable results if it is >8K or so. Passing an object seems to work fine.

    4) Just as you can pass a value to a modal dialog when it opens, it can pass a value/object back to the calling function when it closes:
    Code:
    var returnObj = window.showModalDialog("HTMLEditor/HTMLEditor.htm",tmpObj,"dialogWidth:700px; dialogHeight:500px;help:no;")
    (again, pass an object back rather than a value for the same reasons as before)

    5) Fire up the example you sent me, switch to the HTML code view, and type a URL - it will be auto-hyperlinked, which doesn't make sense in a source view!! I found this extremely irritating (although harmless) when manually adding code (IMG SRCs, etc.), and so prefer to use a textbox instead.


    HTH!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!


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
  •