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

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

首先:看下我用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>



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