Simple blog Editor: Play With the document.exe cCommand command,

Simple blog Editor: Play With the document.exe cCommand command,

XhEditor is a lightweight cross-platform visual XHTML editor developed based on jQuery and released based on the LGPL open-source protocol. Let's copy it today.

The following figure shows the effect:

First make the menu part: it is found to be a background image, so the image ing method can be used to achieve:

   1: 

   2:             <map id="iconmap" name="iconmap">

3: <area shape = "circle" coords = "17,14, 12" href = "#" title = "cut (Ctrl + X)" id = "cut"

   4:                 onmouseover="hiddenDiv();"></area>

5: <area shape = "circle" coords = "40,14, 12" href = "#" title = "copy (Ctrl + C)" id = "copy"

   6:                 onmouseover="hiddenDiv();"></area>

7: <area shape = "circle" coords = "63,14, 12" href = "#" title = "paste (Ctrl + V) "id =" paste "onmouseover =" hiddenDiv (); "> </area>

   8:                 <area shape="circle" coords="86,14,12" id="special"></area>

   9:                 <div id="specialDiv">

10: <p style = "font-size: 13px; padding-left: 15px;"> press Ctrl + V to paste the content into the box, press OK </p>

  11:                     <textarea cols="37" rows="5" id="textAreaww"></textarea>

12: <input type = "button" onclick = "charu ('comfirm');" value = "OK"

  13:                     style="margin-left:220px;margin-top:5px;">

14: <input type = "button" onclick = "charu ('cancel');" value = "cancel">

  15:                 </div>

  16:  

  17:  

18: <area shape = "circle" coords = "112,14, 12" href = "javascript: parag ('& lt; p>')" title = "section tag"

  19:                 id="paragraph"></area>

  20:                 <ul id="paraUl">

21: <li> <a href = "javascript: parag ('& lt; p> ') "> <p> general section </p> </a> </li>

22: <li> <a href = "javascript: parag ('& lt; h1>')"> 
23: <li> <a href = "javascript: parag ('& lt; h2>')"> 
24: <li> <a href = "javascript: parag ('& lt; h3> ') "> 
25: <li> <a href = "javascript: parag ('& lt; h4> ') "> 
26: <li> <a href = "javascript: parag ('& lt; h5> ') "> 
27: <li> <a href = "javascript: parag ('& lt; h6> ') "> 
28: <li> <a href = "javascript: parag ('& lt; pre> ') "> <pre> orchestration format </pre> </a> </li>
29: <li> <a href = "javascript: parag ('& lt; address>')"> <address> address </addresss> </a> </li>
  30:                 </ul>



Similar methods are used for other area areas. With static effects, you can use JavaScript to implement simple interaction: Hide and display sub-menus:


1: var cut = document. getElementById ("cut ");
   2:     cut.onclick=function()
   3:     {
4: alert ("You cannot use the cut operation for browser security settings. Please use the keyboard shortcut key (Ctrl + X) to complete ");
   5:     }
   6:     var copy = document.getElementById("copy");
   7:     copy.onclick=function()
   8:     {
9: alert ("You cannot use the copy operation for browser security settings. Please use the keyboard shortcut key (Ctrl + C) to complete ");
  10:     }
  11:     var paste = document.getElementById("paste");
  12:     paste.onclick=function()
  13:     {
14: alert ("your browser security settings do not allow the paste operation, please use the keyboard shortcut key (Ctrl + V) to complete ");
  15:     }
  16:  
  17:     var special = document.getElementById("special");
  18:     var specialDiv = document.getElementById("specialDiv");
  19:     special.onmouseover=function()
  20:     {
  21:         specialDiv.style.display = "block";
  22:         paraUl.style.display = "none";
  23:         fontUl.style.display = "none";
  24:         sizeUl.style.display="none";
  25:         fontColorDiv.style.display="none";
  26:         bgColorDiv.style.display="none";
  27:         duiqiUl.style.display = "none";
  28:         liebiaoUl.style.display = "none";
  29:         setLDiv.style.display="none";
  30:         tuDiv.style.display="none";
  31:         bqDiv.style.display="none";
  32:         bgDiv.style.display="none";
  33:         codeDiv.style.display="none";
  34:         yyDiv.style.display="none";
  35:     }


For other areas, the mouseover and mouseout events are used. Then, the execCommand is used to apply the function
Element. Ps: different browsers support different execCommand commands. The Code has been debugged in new versions of FF and Chrome.
Not debugged. Please forgive me for the different results.

/** It is best not to set the second parameter to TRUE, otherwise it may fail to execute * // Bold function jiacu(invalid variable document.exe cCommand ("Bold", false, null );} // Italic function xieti(invalid parameters document.exe cCommand ("Italic", false, null);} // Underline function xiaworkflow (optional values document.exe cCommand ("Underline", false, null );} // Delete the linethrough function shanchu({document.exe cCommand ("StrikeThrough", false, null);} // set the font function setfontname(param1_document.exe cCommand ("FontName", false, param); document. getElementById ("fontUl "). style. display = "none";} // set the font size function setfontsize(param00000000document.exe cCommand ("FontSize", false, param); document. getElementById ("sizeUl "). style. display = "none";} // set the font color function setfontcolor(param00000000document.exe cCommand ("ForeColor", false, param) document. getElementById ("fontColor1 "). style. display = "none";} // set the background color function setbackcolor(param00000000document.exe cCommand ("BackColor", false, param) document. getElementById ("bgColor1 "). style. display = "none";} // Delete the text format function removeformat(optional optional parameter document.exe cCommand ("RemoveFormat", false, null);} // alignment function duiqiway(param00000000document.exe cCommand (param, false, null); document. getElementById ("duiqiUl "). style. display = "none";} // insert list function insertList (param) // you cannot specify document.exe cCommand (param, false, null); alert ("not implemented now"); document. getElementById ("liebiaoUl "). style. display = "none";} // function changeIndent (param) // you cannot specify document.exe cCommand (param, false, null); alert ("not implemented now ");} // The Link // cannot be implemented. The unlinked command is only used to call the function setlink(param1_document.exe cCommand (param, false, "http://blog.csdn.net/u011043843") created with the createLink command "); // The third parameter is URLalert ("not implemented for the moment");} // The emoticon function insertbq(param%{document.exe cCommand ("InsertImage", false, param); // param indicates the url document of the image. getElementById ("bqDiv "). style. display = "none";} // The Section function parag(param00000000document.exe cCommand ("formatBlock", false, param); document. getElementById ("paraUl "). style. display = "none ";}

For execCommand usage, please make up your mind. We recommend a slightly official link: https://developer.mozilla.org/zh-CN/docs/Web/API/document.execCommand
Some command browsers do not support this function, and the small Editor capabilities are limited. In the end, only some functions are implemented. Sorry for the shortcomings.
Limited space, only write part of the code. If you need to download all the code:
Download (at the bottom)






JS Text Editor
When I attended a lecture today, the lecturer recommended a very useful JSIDE. I downloaded the trial and found that it was really good. I would like to recommend my name to you.

Name: APTANA

Official Website: www.aptana.comwww.aptana.com/studio/download

Features:

The smart prompts in Aptana are called Code Assist, which is equivalent to the intelliisense in.

Have you seen the browser icon behind it? That is the prompt for browser compatibility. If you are a JS veteran, you should know how important it is to developers.

Not only javascript, but also DOM 1, 2 for HTML:

CSS:

Have you seen the yellow box below? That is something called Quick Info in.

Error message-no fewer than one:

Doument outline (document structure) CSS, HTML, and JS unified display:

Code folding and project management are all supported. Aptana also has a wide range of online documents that are constantly updated in the form of wiki. Of course, you can directly access these documents in Aptana when connected.

How are you doing? Is this tool very good and powerful? With this tool, it will be much easier to compile js code in the future.

Use entexeccommand () in asp ()
This is not an ASP issue. It is a javascript script on the client.

2D-Position allows you to move an absolute position object by dragging it.
AbsolutePosition: Set the position attribute of the element to "absolute" (absolute ).
Set BackColor or obtain the background color of the selected area.
BlockDirLTR is not currently supported.
BlockDirRTL is not currently supported.
Bold switches whether the selected area is in Bold or not.
BrowseMode is not currently supported.
Copy Copies the selected area to the clipboard.
CreateBookmark: Create a bookmarks anchor to obtain the name of the bookmarks anchor of the selected area or insert point.
CreateLink inserts a hyperlink in the selected area or displays a dialog box that allows you to specify the URL of the hyperlink to be inserted for the selected area.
Cut: copy the selected area to the clipboard and delete it.
Delete deletes the selected area.
DirLTR is not currently supported.
DirRTL is not currently supported.
EditMode is not supported currently.
FontName: set or obtain the font of the selected area.
FontSize: set or obtain the font size of the selected area.
Set or obtain the foreground (text) color of the selected area.
FormatBlock sets the formatting label of the current block.
Indent increases the indentation of selected text.
InlineDirLTR is not currently supported.
InlineDirRTL is not currently supported.
InsertButton overwrites the selected area with a button control.
InsertFieldset overwrites the selected area with a box.
InsertHorizontalRule overwrites the selected area with a horizontal line.
InsertIFrame overwrites the selected area with an embedded frame.
InsertImage overwrites the selected area with an image.
InsertInputButton overwrites the selected area with a button control.
InsertInputCheckbox overwrites the selected area with the check box control.
InsertInputFileUpload overwrites the selected area with the file upload control.
InsertInputHidden inserts a hidden control to overwrite the selected area.
InsertInputImage overwrites the selected area with an image control.
InsertInputPassword overwrites the selected zone with a password control.
InsertInputRadio overwrites the selected area with a single-choice button control.
InsertInputReset overwrites the selected area with the Reset Control.
InsertInputSubmit overwrites the selected area with the submit control.
InsertInputText overwrites the selected area with a text control.
InsertMarquee overwrites the selected area with empty subtitles.
InsertOrderedList: select the number list or regular formatting block for the selected area.
InsertParagraph overwrites the selected area with a line break.
InsertSelectDropdown overwrites the selected area with the drop-down box control.
InsertSelectListbox overwrites the selected area with the list box control.
InsertTextArea overwrites the selected area with the multi-line text input control.
InsertUnorderedList switches whether the selected area is a project symbol list or a regular formatting block.
Italic switch to whether the selected area is displayed in Italic or not.
JustifyCenter: place the selected area in the formatting block.
JustifyFull is not currently supported.
JustifyLeft: Align the formatting block of the selected area to the left.
JustifyNone is not currently supported.
JustifyRight: Right-click the formatting block of the selected area and select the full text>