菜鸟也封装之简单文本编辑器.

现在各类文本编辑器数不胜数,看都后你是不是感觉很高深?其实不过如此...

首先:看下我用HTML+JavaScript封装的一个简单文本编辑器.

图1

可以支持图片哦.

这样的文本框就是我们常见的一个DIV,代码如下:

 

< style > ...
.editDIV{...}{
    PADDING-RIGHT:10px;
    OVERFLOW-Y:auto;
    PADDING-LEFT:10px;
    SCROLLBAR-FACE-COLOR:#ffffff;
    FONT-SIZE:11pt;
    PADDING-BOTTOM:0px;
    SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;
    OVERFLOW:auto;
    WIDTH:510px;
    SCROLLBAR-SHADOW-COLOR:#919192;
    COLOR:blue;
    SCROLLBAR-3DLIGHT-COLOR:#ffffff;
    LINE-HEIGHT:100%;
    SCROLLBAR-ARROW-COLOR:#919192;
    PADDING-TOP:0px;
    SCROLLBAR-TRACK-COLOR:#ffffff;
    FONT-FAMILY:宋体;
    SCROLLBAR-DARKSHADOW-COLOR:#ffffff;
    LETTER-SPACING:1pt;
    HEIGHT:200px;
    TEXT-ALIGN:left;
    border: 1px solid #999999;
    word-break:break-all; 
    dispaly: block; 
}    
</ style >
< div  contenteditable class ="editDIV" ></ div >

这样我们是不是就能搞出自己的文本编辑器来那?