r.a.d.controls version |
7.0.1.0 |
.NET version |
2.0 |
Visual Studio version |
2005 |
programming language |
C# |
browser support |
IE6/7 and Firefox |
PROJECT DESCRIPTION We had a requirement to lock down the contents of snippets.
Initially we tried using the CONTENTEDITABLE and UNSELECTABLE tags which sort of worked but was awkward. One issue was that it was necessary to put these attributes against every element in the snippet (not just the parent). Also, the tags didn't work on Firefox. We tried using the style '-moz-user-select:none' which mostly worked except in table cells.
We had the idea of using an iframe to display the snippet. This has worked very well. We have a page (Snippet.aspx) which is used as the src of the iframe and gets passed the snippet's id in the query string. Snippet.aspx is then responsible for providing the snippet's content.
The only issue was that the iframe had to automatically resize its height according to its content. In IE this was easy by adding an onload event to the iframe. However in Firefox it was harder because the onload event doesn't get fired from the rich text engine (not Telerik's fault). We eventually solved this by programmatically attaching an event listener to the iframe.
The code files are easy to use - just 2 pages. Default.aspx is the start-up page and contains the editor with a snippet toolbar button. As a snippet is inserted an iframe is dropped into the editor with Snippet.aspx as its src and a resized height.
On the Save button we search for snippets by using a regular expression and use a placeholder in our Html to record the fact that a snipppet has been inserted.