Home > Developer > JavaScript
Write HTML online editor with JavaScript
There are 3 main types of online editors: 1. Directly with TEXTAREA label
Advantages: Fast, easy to submit, can use UBB label to make up for what can not be seen
Cons: Not intuitive, very few functions
2. Use div or table contenteditable tags, attributes to make an area editable
Advantages: Can be very intuitive, can do a variety of effects
Disadvantage: This tag is not available under Mozilla, only suitable for IE browser, and high requirements for JS
3. Use the Document.designmode = "on" of the document in the IFRAME or frame to make editable
Advantages: With all the advantages of the second above, and also many browsers such as FF and other support
Disadvantage: High requirements for JS.
I have not been aware of many of the Web site on the online editor is going on, and later found in the document object of a method.
Document.execcommand (command, false, value);
To know the specific principle.
First, let's look at an example:
<div contenteditable= "true" style= "Border:dashed blue 2px" >hello world!</div>
Save As HTML page, open to see, in the div there is a cursor, this div becomes editable.
Similarly, Span,font can have contenteditable= "true" for this property.
Try the following:
<div contenteditable= "true" style= "Border:dashed blue 2px" >hello world!
</DIV>
So we can stretch the picture.
Second, the concrete realization:
1, need two pages, blank.html editor.html
2, blank.html as an inline frame of editor.html, as an edit box.
<body topmargin= "Ten" leftmargin= "bgcolor=" #f6f6f6 ">
<div id= "RTC" contenteditable = true></div>
</body>
3, editor.html is mainly some JavaScript, used to handle different commands.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script language= "JavaScript" >
<!--
var contenthtml;
function Execommand (command, value)
{
Document.execcommand (command, false, value);
}
Bold
function Black ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' Bold ', ');
}
Italic body
function Italic ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' Italic ', ');
}
Underline
function underline ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' underline ', ');
}
Indent into the inside
function Indent ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' Indent ', ');
}
Indent Outward
function Outdent ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' outdent ', ');
}
Unordered list
function Unorderlist ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' insertunorderedlist ', ');
}
Ordered list
function OrderList ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
Execommand (' insertorderedlist ', ');
}
Insert Picture
function Image ()
{
var obj = frames[' IFRTC '). RTC;
Obj.focus ();
ImagePath = window.prompt (' Please enter picture path: ', ');
Execommand (' Insertimage ', ImagePath);
}
Preview effect
function Preview ()
{
var htmlcontent = frames[' IFRTC '). rtc.innerhtml;
var open = window.open (");
Open.document.write (htmlcontent);
}
View the HTML source code in the edit box
function Source ()
{
var htmlcontent = frames[' IFRTC '). rtc.innerhtml;
if (Document.all.iframeDiv.style.display = = ' block ')
{
Document.all.iframeDiv.style.display = ' None ';
Document.all.htmlText.value = htmlcontent;
Document.all.textDiv.style.display = ' block ';
Document.all.htmlText.focus ();
Document.all.source.value= ' HTML ';
}
Else
{
Document.all.iframeDiv.style.display = ' block ';
Document.all.textDiv.style.display = ' None ';
frames[' IFRTC '. rtc.innerhtml = Document.all.htmlText.value;
frames[' IFRTC '. Rtc.focus ();
Document.all.source.value= ' source code ';
}
}
Increase the height of the edit box
function Add ()
{
Document.all.ifRTC.height = document.all.ifrtc.height*1 + 50;
}
-
</SCRIPT>
</HEAD>
<BODY>
<table width= "border=" 0 ">
<TR>
<td><input type= "button" value= "B" name= "Black"/></td>
<td><input type= "button" value= "I" name= "Italic"/></td>
<td><input type= "button" value= "U" name= "Underline"/></td>
<td><input type= "button" value= "UL" name= "Unorderlist"/></td>
<td><input type= "button" value= "OL" name= "OrderList"/></td>
<td><input type= "button" value= "left" name= "Outdent"/></td>
<td><input type= "button" value= "right" name= "Indent"/></td>
<td><input type= "button" value= "figure" name= "image"/></td>
</TR>
</TABLE>
<div id= "Iframediv" style= "Display:block" >
<iframe id= "IFRTC" width= "1" height= "border=" ></iframe>
</div>
<div id= "Textdiv" style= "Display:none" >
<textarea id= "HTMLText" cols= "ten" rows= "></textarea>"
</div>
<br>
<input type= "button" value= "+" name= "Add"/>
<input type= "button" value= "previewing" name= "Preview"/>
<input type= "button" value= "source code" name= "Sources"/>
</BODY>
</HTML>
Third, PostScript:
What is written here is just a simple editor, in fact, the important thing is:
Contenteditable= "true"
And
Document.execcommand (command, false, value);
For some methods of document, you can view the MS documentation.
Some of the execcommand commands can also be found in the documentation, listed below:
ExecCommand (command, false, value); The command in can be the following:
BackColorSets or retrieves the background color of the current selection.
BoldToggles the current selection between bold and nonbold.
Clearautocompleteforformsclears saved forms data.
CopyCopies The current selection to the Clipboard.
CreateBookMarkRetrieves the name of a bookmark anchor or creates a bookmark anchor for the current selection or I Nsertion Point.
CreatelinkRetrieves the URL of a hyperlink or creates a hyperlink on the current selection.
CutCopies The current selection to the Clipboard and then deletes it.
DeleteDeletes the current selection.
FontNameSets or retrieves the font for the current selection.
FontSizeSets or retrieves the font size for the current selection.
ForeColorSets or retrieves the foreground (text) color of the current selection.
FormatblockSets or retrieves the current block format tag.
Indentincreases the Indent of the selected text by one indentation increment.
Insertbuttonoverwrites a button control on the current selection.
InsertFieldSetoverwrites a box on the current selection.
Inserthorizontalruleoverwrites a horizontal line in the current selection.
Insertiframeoverwrites an inline frame on the current selection.
Insertimageoverwrites an image in the current selection.
Insertinputbuttonoverwrites a button control on the current selection.
Insertinputcheckboxoverwrites a check box control on the current selection.
Insertinputfileuploadoverwrites a file upload control on the current selection.
InsertinputhiddenInserts a hidden control on the current selection.
Insertinputimageoverwrites an image control in the current selection.
Insertinputpasswordoverwrites a password control on the current selection.
Insertinputradiooverwrites a radio control on the current selection.
Insertinputresetoverwrites a reset control on the current selection.
Insertinputsubmitoverwrites a submit control on the current selection.
Insertinputtextoverwrites a text control on the current selection.
Insertmarqueeoverwrites an empty marquee on the current selection.
InsertorderedlistToggles the current selection between an ordered list and a normal format block.
InsertParagraphoverwrites a line break on the current selection.
Insertselectdropdownoverwrites a Drop-down selection control on the current selection.
Insertselectlistboxoverwrites a list box selection control on the current selection.
Inserttextareaoverwrites a multiline text input control on the current selection.
InsertunorderedlistToggles the current selection between an ordered list and a normal format block.
ItalicToggles the current selection between Italic and Nonitalic.
JustifycenterCenters the format block in which, the current selection is located.
Justifyleftleft-justifies the format block in which, the current selection is located.
Justifyrightright-justifies the format block in which, the current selection is located.
Outdentdecreases by one increment the indentation of the format block in which the current selection is located.
OverWriteToggles the text-entry mode between insert and OverWrite.
Pasteoverwrites the contents of the Clipboard on the current selection.
RefreshRefreshes the current document.
RemoveformatRemoves the formatting tags from the current selection.
SelectAllselects the entire document.
SaveAsSaves The current Web page to a file.
Unbookmarkremoves any bookmark from the current selection.
UnderlineToggles the current selection between underlined and not underlined.
Unlinkremoves any hyperlink from the current selection.
Unselectclears the current selection.
Filter HTML online Editor to generate harmful code
2008-04-03 14:03
Some powerful online editor, already contains the code collation, filtering function, but JS processing can be very easy to spare, the server must be filtered once again, these days spent a little time, write a part, I hope to everyone a little useful, I have limited capacity, but also please have the ability of friends to fill it.
/* Do not need to filter the array */
$htm _on=array (
"<acronym", "acronym>",
"<basefont", "basefont>",
"<button", "button>",
"<caption", "caption>",
"<clientinformation", "clientinformation>",
"<font", "font>",
"<implementation", "implementation>",
"<button", "button>",
"<location", "location>",
"<option", "option>",
"<selection", "selection>",
"<strong", "strong>",
"Font");
$htm _on_uper=array (
"<acronym", "acronym>",
"<basefont", "basefont>",
"<button", "button>",
"<caption", "caption>",
"<clientinformation", "clientinformation>",
"<font", "font>",
"<implementation", "implementation>",
"<button", "button>",
"<location", "location>",
"<option", "option>",
"<selection", "selection>",
"<strong", "strong>",
"FONT");
/* Character Format */
$str =strtolower ($STR);
$str =preg_replace ("/\s+/", "", $str);//Filter Enter
$str =preg_replace ("/+/", "", $str);//Filter multiple spaces
/* Filter/Replace several forms of js*/
$str =preg_replace ("/< (script.*?) > (. *?) < (\/script.*?) >/si "," ", $str);//delete <script> ... </script> format,
$str =preg_replace ("/< (script.*?) > (. *?) < (\/script.*?) >/si "," <\\1>\\2<\\3> ", $str);//Replace with can display,
$str =preg_replace ("/< (script.*?) >/si "," ", $str);//delete <script> not closed
$str =preg_replace ("/< (script.*?) >/si "," <\\1> ", $str);//Replace not closed
/* Delete/Replace form */
$str =preg_replace ("/< (\/?form.*?) >/si "," ", $str);//Delete form
$str =preg_replace ("/< (\/?form.*?) >/si "," <\\1> ", $str);//Replace Form
$str =preg_replace ("/< (i?frame.*?) > (. *?) < (\/i?frame.*?) >/si "," ", $str);//Delete frame
$str =preg_replace ("/< (i?frame.*?) > (. *?) < (\/i?frame.*?) >/si "," <\\1>\\2<\\3> ", $str);//Replace Frame
/* Filter on Event */
$str =preg_replace ("/href= (. +?) ([\ "|\ ' | |>])/ie", "' href= '. Strtoupper (' \\1 '). ' \\2 ' ", $str);//Convert the href= involved in to uppercase.
$str =str_replace ($htm _on, $htm _on_uper, $STR);//change <font,font> to uppercase, DHTML tag character, regular judgment too cumbersome, adopt the conversion method.
$str =preg_replace ("/(on[^ \.<>]+?) ([|>])/S "," \\2 ", $str);//Take off the on event
/* Filter Super-connected js*/
$str =preg_replace ("/(Href|src|background|url|dynsrc|expression|codebase) [=:\ (] ([\" \ ']*?\w+\ "). *?| Javascript|vbscript:[^>]*?) (\)?) ([>\/])/si "," \\1= ' # ' \\3\\4 ", $str);//Remove Href=javascript:
Return lowercase characters
$str =strtolower ($STR);
$str =str_replace ("&", "& #x26;", $STR);
Writing HTML online editor with JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
