Non movable image
Michal
Is it possible for the user to add a non-movable image to the editable
area? I would like users to be able to add an image, but I would like
it to float: left in the top left, and it to be impossible to insert
any text before it.
(This isn't vital to what I'm working on: right now in my app the
image is added separately. I just think it would be nice to be able to
add that image right into the editable area, so the editor know
exactly what the page will look like).
Thanks,
Michal.
ryan
I think this should be possible by preventing the mousedown and click
events on an image, so that they can't be dragged. I haven't tested
it, but that should work as follows:
inst = new MooEditable(// insert elements and options here//);
inst.addEvent('toggleView',function(){
if (this.mode == 'iframe'){
this.doc.getElements('img//CSS selector syntax here//').addEvents
({
'click' : function(ev){ ev.stop(); },
'mousedown' : function(ev){ ev.stop(); }
);
}
});
Just replace the bits in between // // with whatever is needed.
Thanks,
Ryan
Michal
> I think this should be possible by preventing the mousedown and click
> events on an image, so that they can't be dragged. I haven't tested
> it, but that should work as follows:
One issue that I expect with this is the the image can be injected
anywhere: not necessarily when the cursor is at the beginning of the
document, and so the image would not be fixed.
Thinking about it further, what would be ideal for me, would be if the
editable area was not all of the iFrame, but there was a wrapper div,
like:
<body>
<p> This is not editable</p>
<div>
<p>This is editable</p>
</div>
</body>
And in fact only the contents of the wrapper div was seen as content
of the replaced textarea. Then if the body of the iFrame could be
exposed via an API. Then I could inject/remove elements "externally"
as I see fit.
Is such a thing possible?
Michal.
ryan
It should be, but you'll need to do some work in the core code.
http://github.com/cheeaun/mooeditable/blob/master/Source/MooEditable/MooEditable.js#L212
Is where you need to start, it makes the whole document body editable.
What you will need to do is to insert another element to this.doc and
then make it editable.
Hope this helps,
Ryan
Michal Charemza
Michal.