教学演示-UBB,剪贴板,textRange及其他

Ebony ·

更新时间:2024-09-21

· 747 次阅读

这是一个给新手学习代码的帖子，包含以下内容：
如何使用UBB代码，如何用js与剪贴板交互，如何使用textRange对象，如何使用自定义的快捷键操作，如何自动随窗口大小调整页面内容尺寸，正则表达式的使用等等
请仔细阅读代码，有问题请提问，目前代码开发完成度80％，IE only

<b> 
<b> 
<title>Blue Idea UBB Code Edit</title> 
* { 
    margin:0px; 
    padding:0px; 
} 
html, body { 
    background-color:buttonface; 
    width:100%; 
    height:100%; 
    overflow:hidden; 
    border-width:0px; 
    font-size:13px; 
    font-family:Verdana Arial 宋体; 
    color:#333333; 
    cursor:default; 
} 
input {border-width:1px;} 
#divMain { 
    overflow:hidden; 
} 
#divTools { 
    width:100%; 
    height:20px; 
    line-height:20px; 
    overflow:hidden; 
    border-bottom:1px solid buttonshadow; 
    margin:0px; 
    padding:0px; 
    padding-left:10px; 
    background-color:buttonface; 
    color:black; 
} 
#divTools label { font-weight:bold;float:left;padding-left:15px;padding-right:15px;} 
#divTools a { 
    display:block; 
    float:left; 
    height:20px; 
    padding-left:15px; 
    padding-right:15px; 
    line-height:20px; 
    text-align:center; 
    overflow:hidden; 
    color:black; 
    text-decoration:none; 
} 
#divTools a:hover {background-color:gold;color:black;} 
#divTools a:active {background-color:navy;color:white;} 
#divContent, #txtContent { 
    border:1px inset buttonface; 
    width:94%; 
    height:400px; 
    overflow:auto; 
    padding:5px; 
    margin:2px 15px 0px 15px; 
    background-color:white; 
    color:black; 
    display:none; 
} 
#txtContent { 
    font-size:14px; 
    border-width:1px; 
    display:block; 
} 
.UBB_code { 
    border:1px solid #555; 
    padding:10px; 
    margin:10px; 
    width:500px; 
    background-color:#DDD; 
    font-size:13px; 
    font-weight:normal; 
    color:black; 
} 
.UBB_html { 
    padding:4px; 
    width:350px; 
    height:200px; 
    font-size:13px; 
    font-weight:normal; 
    color:black; 
} 
.UBB_html_button { 
    width:100px; 
    height:22px; 
    line-height:18px; 
    border-width:2px; 
    margin:0px; 
} 
</b> 
<label>视图模式:</label> 
代码视图 
预览视图 
<label> | 样式工具:</label> 
黑体 
斜体 
代码 
HTML 运行 
字体 +  
字体 -  
粘贴UBB 
粘贴HTML 
<textarea id="txtContent"> 
</b>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

剪贴板

1024 个赞