Stop certain elements from being edited inside a doc having designMode = "on";

Question

I am using an iframe and setting its contendocument.designMode to "on". This allows me to replicate a Rich Text Editor, and achieve much more flexibility in the editing process.

The problem is that I have certain links (<a href="#" onclick="alert(1);">test</a>) that are added to the page, and of course these links don't work because i'm in designMode.

At first I thought, well I'll just wrap that link inside another iframe, but still it won't fire the event attached to it.

Is there a way to have certain elements work as they would normally, even though they are inside a designMode="on" document?

Answer 1

If you look at google docs, when you focus on the link, they show a small div with different actions for that link.

I guess they have spent already a lot of energy to make it the best they could. So I wouldn't try something different.

Answer 2

Recently had the exact same problem. My solution was to use a div with contentEditable="true" instead of an iframe, which then allows you to set contentEditable="false" on elements within that div. Not a perfect solution, but gets the job done in my case.

Answer 3

You can place a checkbox to toggle to designmode 'on' and 'off'. To see the action temporarily swich to designMode 'off'. This way you may be able to get the desired behavior of your script.