1. I am learning way more than I would have other wise.
2. I know exactly how every part of my program works, and why it works the way it does.
3. I don't have to pay anyone for anything.
4. I avoid situations like what I encountered tonight.
One of the components of my program is a rich text editor. I did my research, and basically gave up to download a pre-built editor. I started in on implementing it, when I discovered the cost to use it was going to be $300ish a year. Given the budgetary concerns listed in point 3 I went back to the idea of doing it myself. What I discovered is that all the tutorials I could find were making things way harder than they needed to be. I started over from scratch and very quickly made a working prototype. Is it perfect? No. Do I still need to work through a lot of issues I wouldn't have had to otherwise? Yes. Would I still be sitting in a corner crying if I hadn't? Yes.
Of interesting note is the fact that one of the top results for execCommand returned a javascript reference for IE 4.
Anyway, here is some useful reference I've compiled for execCommand() in javascript that doesn't seem to be put in one place in a simple manor anywhere else. Hope it saves someone the hours it would have saved me. These are all valid for Chrome 16. Your mileage will vary with other browsers.
The phrase "current selection" can refer to any length of selection, even 0. In other words it can also mean current cursor (caret) position.
All references below assume the use of a <DIV> tag with contenteditable set such as:
<DIV id="imeditable" contenteditable></DIV>
All references below to using the default UI need to be updated as they don't work in Chrome. Bah.
The method itself:
execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
-returns true on success, false on failure
Commands:
BackColor - Sets the background color of the current selection.
document.execCommand('BackColor', false, '#333333')
Bold - Toggles the current selection between bold and non-bold OR Toggles bold/non-bold for future typing at cursor position. *note: depending on implementation, the former case will continue in bold for future typing if it is not toggled off, or if the cursor is placed back on a bold section or immediately adjacent.
document.execCommand('Bold')
CreateLink - Inserts a hyperlink on the current selection, or displays a dialog box enabling the user to specify a URL to insert as a hyperlink on the current selection.
document.execCommand('CreateLink', false, 'http://www.example.com')
document.execCommand('CreateLink', true) //displays user dialog
Delete - Deletes current selection.
document.execCommand('Delete')
FontName - Sets the font family for the current selection OR future typing
document.execCommand('FontName',false,'font name')
FontSize - Sets the font size for the current selection OR future typing
document.execCommand('FontSize',false,'font size')
ForeColor - Sets the foreground (i.e. font) color of the current selection
document.execCommand('ForeColor',false,'#333333')
FormatBlock - Sets the current block format tag. Possible Values: "address", "div", "h1", "h2", "h3", "h4", "h5", "h6", "listing", "p", "pre", "xmp","li", "dt", "dd", "p"
document.execCommand('FormatBlock',false,'pre')
Indent - Increases the indent of the selected text by one indent increment
document.execCommand('Indent')
InsertHorizontalRule - Inserts a Horizontal Rule
document.execCommand('insertHorizontalRule','id for new hr')
InsertImage - Inserts an Image
document.execCommand('InsertImage',true)
document.execCommand('InsertImage',false,'path/filename/image')
InsertOrderedList - Toggles the text selection between an ordered list and a normal block
document.execCommand('InsertOrderedList',false,'id for new ol')
InsertParagraph - Inserts a paragraph break
document.execCommand('InsertParagraph',false,'id for new p')
InsertUnorderedList - Toggles the text selection between an unordered list and a normal block
document.execCommand('InsertUnorderedList',false,'id for new ul')
Italic - Toggles the current selection between italic and non-italic
document.execCommand('Italic')
JustifyCenter - Aligns the current selection to the center
document.execCommand('JustifyCenter')
JustifyFull - Aligns the current selection to be fully justified
document.execCommand('JustifyFull')
JustifyNone - Aligns the current selection to the nothing
document.execCommand('JustifyNone')
JustifyLeft - Aligns the current selection to the left
document.execCommand('JustifyLeft')
JustifyRight - Aligns the current selection to the center
document.execCommand('JustifyRight')
Outdent - Decreases the indentation of the current selection by one indentation increment (i.e. the opposite of indent)
document.execCommand('Outdent')
Print - Opens the print dialog
document.execCommand('Print', true)
Redo - Steps forward one step in the undo history
document.execCommand('Redo')
RemoveFormat - Removes the formatting tags from the current selection
document.execCommand('RemoveFormat')
SelectAll - Selects All
document.execCommand('SelectAll')
Strikethrough - Draws a line through the middle of the current selection
document.execCommand('StrikeThrough')
Subscript - Lowers the current selection to the subscript position
document.execCommand('Subscript')
Superscript - Raises the current selection to the superscript position
document.execCommand('Superscript')
Underline - Toggles the current selection between underlined and not underlined
document.execCommand('Underline')
Undo - Undo the previous action
document.execCommand('Undo')
Unlink - Removes any hyperlink from the current selection
document.execCommand('Unlink')
Unselect - Clears the current selection
document.execCommand('Unselect')
Useful Reference:
Rich-Text Editing in Mozilla
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
MSDN Command Identifiers
http://msdn.microsoft.com/en-us/library/ms533049(v=vs.85).aspx
WHATWG Dev guide for execCommand
http://developers.whatwg.org/dnd.html#execCommand
HTML Editing APIs
http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html
No comments:
Post a Comment