TIPS, TRICKS & BOOKMARKS on WEB DEVELOPMENTAbsolute and Relative Paths in MSHTML
After reading of issues that MSHTML (or the DEC, the DHTML Editing Component) has with setting all paths to absolute, I felt I should divulge my solution: set the baseurl of the editor. If using the DEC, where editor is the id of the object try the following: editor.BaseURL = "http://www.example.com/"; In doing so, any calls to an href should now omit the base URL. ...
Prevent Image Resize in MSHTML/DEC
A recent comment asked how to prevent people from resizing images within the DEC. The process to do so is relatively simple. We iterate through every image within the editor and attach the onresizestart event and then cancel the event. You'll also need to attach the event to every image that gets inserted into the editor after load. There's three components to putting this together. The first is ...
WYSIWYG editing in Mozilla
Having developed a WYSIWYG editor for IE, I'm happy to see that Mozilla 1.3+ has similar functionality. It even works in Firebird since it's based on the Mozilla code. The interesting thing will be to test it out on a Mac. This should theoretically offer cross-platform editing. My only complaint is use of the selection and range objects is different than IE. Since neither object appears to conform...
Where's that cursor?
In my CMS, there's a "source view" and a "design view". This is a pretty common feature found in WYSIWYG editors. However, when switching between the two views the cursor will usually default to the very beginning or the very end of the text. The user then has to locate where they were last. There is a way around this! Using a placeholder while switching between views. The placeholder is made of...
onpaste fired oncontextmenu
Somebody pointed out to me a rather troubling issue. Right-clicking on a page to bring up the context menu fires the onbeforepaste event. What if you want to copy text and not paste? The event shouldn't fire. The solution is not to use the default context menu. Create your own context menu to get around the issue. ...
Using getBookmark and moveToBookmark
The getBookmark method doesn't do what you might initially think. It doesn't allow you to create a link to an internet shortcut or get one from the user's machine. What it does do is create a "snapshot" of a selection so you can return to it later. The information returned from the getBookmark method is opaque. This means that it is unreadable and ...
Pasting Content into the MSHTML
For those of you who have read the article on importing content from Word into the MSHTML editor have noticed that this mechanism is handled through a modal dialog box. A more common request, however, has been: "How do you parse the content using the onpaste event?" Many have tried to use the clipboardData object and the getData method to try and retrieve ...
Creating Custom Context Menus for MSHTML
The DEC already has methods available for creating a custom context menu but MSHTML doesn't. This code adds this nice functionality to MSHTML and does it in a way that is quite similar to the DEC samples that come from Microsoft. The approach to this process was to create an interface that was as close to the standard context menu that appears in the browser as well as the one that appears i...
ShowBorders property for MSHTML
For anybody who has developed a WYSIWYG editor using the DEC and has wanted to switch over to the MSHTML has had to deal with "missing" functionality. At first, I thought that this type of functionality would have been available but in doing a little research, there doesn't appear to be a property anywhere to be able to set that. So, I made my own! First, in the onload event of the editor I set t...
Creating a custom Find dialog for MSHTML
The find dialog functionality that comes with the DEC does the trick but if you've moved onto the MSHTML functionality in IE5+ or you want to change the interface in the DEC then you need something custom made. First, let's put together the code to open the find dialog: showModelessDialog( "find.html", window, "dialogWidth:385px; dialogHeight:165px; scroll:no; status:no; he...
Custom Colour Picker
As functional as the colour picker from Microsoft seems to be, I figured that there is always room for improvement. The selcolor.htm file from Microsoft can be completely replaced with my new version. This colour picker dialog box can also be easily included into other Web applications as the parameters that are passed back are not DEC specific. Download the code I revamped it, making it more sim...
From Word to the DEC
Wanting to step up the functionality on my initial code I decided to do some research on other variations on copying content from a Word document to store into a database. What I've created consists of two files: loaddocument.html and findworddoc.html. Download the code Open up loaddocument.html in your browser. Click on the Load button and you will see a dialog box prompting for t...
Microsoft's Dynamic HTML Editing Component (DEC)
There are actually two different ways you can accomplish HTML editing in IE5 and up. There is the MSHTML editor and then there's the DHTML Editing Component. The MSHTML editor allows for WYSIWYG editing by defining "editable regions" of a page. The DEC on the other hand is an embedded ActiveX control that works much like a ...
I'm Jonathan Snook and I write about web design and development. I speak at conferences and I yammer on about what I'm having for lunch on Twitter. You can keep up to date with everything I blog here via the RSS feed.
Want to learn more?
