现在各类文本编辑器数不胜数,看都后你是不是感觉很高深?其实不过如此...
首先:看下我用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 >
.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 >
这样我们是不是就能搞出自己的文本编辑器来那?