Restricting area in editable HTML user can edit.
-
Here's what I'm trying to accomplish (and I admit right up front that I am a hobby coder and some of this stuff is over my head, but I learn best by trying something new)... What I would like to be able to do is have an editable HTML document, except have areas that are "off limits." For example, having the top portion of the page, with logos and header stuff NOT editable, but everything below that editable. I have read Rob Manderson's article on Using IHTMLEditDesigner[^]. I think I have a fair understanding of how it works. I posted essentially this message on the article's page, but no one has responded, so I figured I'd try here. So what I was thinking is to set up separate sections (several
sections) and set perhaps the background color of the off-limits areas to a light gray (so that the user can see what is off-limits). Then if the user clicks in or moves the cursor to an area of the document that is in the off-limits area, the editor would simply jump the cursor back out of the off-limits area -- perhaps to the first position below the off-limits area (or perhaps simply cancel the mouse-click or cursor move). I would also need to disable the ability to click and drag to highlight an area within the off-limits section. So, the first question is: is it doable? The second question is: how do I do it? And I don't expect you guys the write this for me, but point me in the direction of being able to track where the cursor is in the document and programmatically move it elsewhere, how to detect the background color of the element at the cursor location (or selected text in case the user clicks in an editable section and then drags into an off-limits section), etc. I think I have a basic understanding of Rob's article, but I'm stuck as to where to go from here. I have tried just a simple modification of his demo program where I try to cancel the click in a DIV (or keydown or keypress or mousedown) instead of the ondrag, but so far to no avail. I guess my very first question is how do I cancel the user's ability to click or keypress within a DIV? Thanks for any ideas/suggestions.
-
Here's what I'm trying to accomplish (and I admit right up front that I am a hobby coder and some of this stuff is over my head, but I learn best by trying something new)... What I would like to be able to do is have an editable HTML document, except have areas that are "off limits." For example, having the top portion of the page, with logos and header stuff NOT editable, but everything below that editable. I have read Rob Manderson's article on Using IHTMLEditDesigner[^]. I think I have a fair understanding of how it works. I posted essentially this message on the article's page, but no one has responded, so I figured I'd try here. So what I was thinking is to set up separate sections (several
sections) and set perhaps the background color of the off-limits areas to a light gray (so that the user can see what is off-limits). Then if the user clicks in or moves the cursor to an area of the document that is in the off-limits area, the editor would simply jump the cursor back out of the off-limits area -- perhaps to the first position below the off-limits area (or perhaps simply cancel the mouse-click or cursor move). I would also need to disable the ability to click and drag to highlight an area within the off-limits section. So, the first question is: is it doable? The second question is: how do I do it? And I don't expect you guys the write this for me, but point me in the direction of being able to track where the cursor is in the document and programmatically move it elsewhere, how to detect the background color of the element at the cursor location (or selected text in case the user clicks in an editable section and then drags into an off-limits section), etc. I think I have a basic understanding of Rob's article, but I'm stuck as to where to go from here. I have tried just a simple modification of his demo program where I try to cancel the click in a DIV (or keydown or keypress or mousedown) instead of the ondrag, but so far to no avail. I guess my very first question is how do I cancel the user's ability to click or keypress within a DIV? Thanks for any ideas/suggestions.
Well, either no one could answer this, or no one noticed the question, or no one wanted to answer it. Regardless, I did some checking and finally found one solution (although not necessarily the best nor necessarily the solution I want to use -- I'll know once I play with it more). Anyway, one way to restrict where the user can edit, is to simply put the areas of the HTML document you want to protect into a DIV and within that tag include "contentEditable=false". E.g. "
" When you do that, what you will find is that keyboard input is cancelled within that section, even though you can highlight things. I kept the drag-cancel implemented in this article to prevent the user from dragging this DIV around. It all seems to work, except that I did notice that when you click within the protected DIV, the editor puts handles around the DIV area that allow you to resize that DIV area. I have not experimented yet to see what effect this has on the HTML document once you save it. Anyway, just in case someone else was looking for an answer to this question, this is at least one partial answer.