<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8"><title>Rich Text Editor</title><Scriptsrc= "Http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></Script><Script>functionSetpic () {alert ('XXX'); $("#editableText"). Append ('');} $(function(){ $("#setpic"). On ('Click',function() {setpic (); }); });</Script></Head><Body> <fieldset> <legend>Edit Area</legend> <Div> <form>Font Color:<Selectonchange= "Setfontcolor (this)"> <optionvalue= "BLACK">Black</option> <optionvalue= "Red">Red</option> <optionvalue= "Green">Green</option> <optionvalue= "Blue">Blue</option> </Select>font style:<Selectonchange= "Setfontstyle (this)"> <optionvalue= "Bold">Bold</option> <optionvalue= "Italic">Italic</option> <optionvalue= "Underline">Underline</option> <optionvalue= "Striketthrough">Striketthrough</option> </Select>Font Name:<Selectonchange= "setfontfamily (this)"> <optionvalue= "Serif">Serif</option> <optionvalue= "Sans-serif">Sans-serif</option> <optionvalue= "Monospace">Monospace</option> <optionvalue= "Comic Sans MS">Comic Sans</option> </Select> </form> <ButtonID= ' Setpic '>Set up a picture</Button> </Div> <BR/> <DivID= "Editabletext"contenteditable= "true"style= "width:400px;min-height:100px;border:2px dashed #ccc"></Div> </fieldset> <Scripttype= "Text/javascript"> functionSetfontcolor (obj) {Document.execcommand ("ForeColor",false, Obj.value); } functionSetfontstyle (obj) {document.execcommand (Obj.value,false,NULL); } functionsetfontfamily (obj) {Document.execcommand ("FontName",false, Obj.value); } </Script></Body></HTML> </Body></HTML>
The Web editor was originally professionally implemented,
Contenteditable= "true"
Web page Editor Implementation prototype