UID1595448性别保密经验 EP铁粒 粒回帖0主题精华在线时间 小时注册时间2024-2-16最后登录1970-1-1
| 本帖最后由 星空晶体 于 2024-6-30 19:56 编辑
网址:https://yiyi14514.github.io/BBcode_beta1
由于是第一个版本,支持的BBcode标签较少,目前支持标签:
color backcolor size
url img
b s u i hr
(之后尽力会添加表格标签和其他)
事例代码:
- [b]苦力怕论坛感谢有你[/b]
- [s]114514[/s]
- [i]哈哈哈[/i]
- [u]gsggshs[/u]
- [url=https://klpbbs.com]苦力怕论坛[/url]
- [size=8]1[/size]
- [color=blue]Creeper?[/color]
- [backcolor=blue]Aw man![/backcolor]
- [img]https://tikolu.net/i/ahnlw[/img]
复制代码
图片展示:
![Screenshot_20240630_194317_com.microsoft.emmx.jpg Screenshot_20240630_194317_com.microsoft.emmx.jpg](https://ip.klpbbs.com/attach.php?id=/forum/202406/30/194438xlv9ryd672r6h2y0.jpg)
![Screenshot_20240630_194324_com.microsoft.emmx.jpg Screenshot_20240630_194324_com.microsoft.emmx.jpg](https://ip.klpbbs.com/attach.php?id=/forum/202406/30/194442ioo83xwy8a01axcv.jpg)
实际效果: 苦力怕论坛感谢有你
114514 哈哈哈 gsggshs 苦力怕论坛 1 Creeper? Aw man!
![](https://tikolu.net/i/ahnlw)
后记:此预览器的核心是JS正则表达式,这东西在我半学会前就像看天书一样,我看了教程也不知所措,都是试错的(
史山源码:
- <!DCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <title>BBcode预览器</title>
- <style>
- body{
- margin: 0;
- padding: 0;
- background-image: url('https://tikolu.net/i/ahnlw');
- height: 100%; /* 背景图垂直和水平均居中 */
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- background-attachment: fixed;
- font-size: 12px;
- font-family: 'Microsoft YaHei', sans-serif;
- }
- #qianyan {
- color: black;
- background-color: white;
-
- border: 2px solid orange;
- margin-top: 20px;
- border-radius: 10px;
- background-color: rgba(255, 255, 255, 0);
- }
- #qianyan .biaoti {
-
- text-align: center;
- color: white;
- text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* 添加一个轻微的阴影以增强效果 */
-
- }
- #qianyan .wen {
-
- color: white;
- }
- #zhengshi {
- color: black;
- background-color: white;
-
- border: 2px solid orange;
- margin-top: 20px;
- border-radius: 10px;
- background-color: rgba(255, 255, 255, 0);
- overflow: hidden; /* 添加这个属性来防止内容溢出 */
- }
- #yulan {
- margin-left: 20px;
- width: calc(100% - 40px); /* 使用calc函数动态计算宽度 */
- height: 260px;
-
- border-radius: 10px;
- background-color: rgba(255, 255, 255, 0);
- color: white;
- overflow: hidden;
- }
- #zhengshi .biaoti {
- text-align: center;
-
- color: white;
- text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* 添加一个轻微的阴影以增强效果 */
- }
- #zhengshi .anniu {
- width: 200px; /* 设置按钮的宽度 */
- height: 50px; /* 设置按钮的高度 */
- padding: 10px; /* 设置内边距 */
-
- border: 1px solid white; /* 设置边框样式和颜色 */
- border-radius: 25px; /* 设置边框角的半径 */
- background-color: rgba(255, 255, 255, 0);;
- margin-left: 80px; /* 设置按钮距离左侧80像素 */
- margin-top: 20px;
- color: white;
- }
- #zhengshi .biaoti1 {
-
- text-align: center;
- color: white;
- text-shadow: 0 0 3px rgba(0, 0, 0, 0.8); /* 添加一个轻微的阴影以增强效果 */
- }
- #output {
- background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
- border: 1px solid white; /* 边框 */
- margin-top: 10px;
- padding: 10px;
- border-radius: 10px;
- width: 94%;
-
- overflow-wrap: break-word; /* 允许长单词或URL换行 */
- word-wrap: break-word; /* 兼容旧浏览器 */
- white-space: pre-wrap; /* 保留空白,但允许适当换行 */
- overflow-y: auto;
- }
- #output1 {
- font-size: 20px;
- margin: 0; /* 移除默认的margin */
- white-space: pre-wrap; /* 保留空白,但允许适当换行 */
- }
- </style>
- <script>
- function jiexi() {
- var shuchu = document.getElementById("yulan").value;
- yulan = shuchu
- .replace(/\[color=([^\]]+)\](.*?)\[\/color\]/gi, function(match, color, content) {
- return '<span style="color: ' + color + '">' + content + '</span>';
- })
- .replace(/\[backcolor=([^\]]+)\](.*?)\[\/backcolor\]/gi, function(match, backcolor, content) {
- return '<span style="background-color: ' + backcolor + '">' + content + '</span>';
- })
- .replace(/\[size=(\d+)\](.*?)\[\/size\]/gi, function(match, size, content) {
- var fontSize;
- switch (size) {
- case '1':
- fontSize = '12px';
- break;
- case '2':
- fontSize = '16px';
- break;
- case '3':
- fontSize = '20px';
- break;
- case '4':
- fontSize = '24px';
- break;
- case '5':
- fontSize = '28px';
- break;
- case '6':
- fontSize = '32px';
- break;
- case '7':
- fontSize = '36px';
- break;
- case '8':
- fontSize = '40px';
- break;
- default:
- fontSize = '20px';
- break;
- }
- return '<span style="font-size: ' + fontSize + '">' + content + '</span>';
- })
- .replace(/\[url=([^\]]+)\](.*?)\[\/url\]/gi, function(match, url, content) {
- return '<a href="' + url + '" target="_blank">' + content + '</a>';
- })
- .replace(/\[b\]/g, "<strong>")
- .replace(/\[\/b\]/g, "</strong>")
- .replace(/\[s\]/g, "<s>")
- .replace(/\[\/s\]/g, "</s>")
- .replace(/\[u\]/g, "<u>")
- .replace(/\[\/u\]/g, "</u>")
- .replace(/\[i\]/g, "<i>")
- .replace(/\[\/i\]/g, "</i>")
- .replace(/\[img\](.*?)\[\/img\]/g, "<img src="$1" style="max-width: 100%; height: auto;">")
- .replace(/\[\hr\]/g, "<hr>");
- document.getElementById("output1").innerHTML = yulan;
- }
- </script>
- </head>
- <body>
- <div id="qianyan">
- <h1 class="biaoti">在 使 用 之 前</h1>
- <p class="wen"><strong>BBcode</strong>是一种简单、易学的<strong>标记语言。</strong>主要用于论坛、在线社区和公告板等平台的文本格式化。它基于HTML,但相比之下更为简单,易于学习和使用。BBcode通过使用特殊的标签来对文本进行格式化,这些标签在显示时会转换为HTML代码,从而实现在网页上的格式化效果。BBcode的语法类似于Html,但是是[]不是<>。此工具可快速预览BBcode代码,让用户可查看排版并修复不足的排版。</p>
- </div>
- <div id="zhengshi">
- <h1 class="biaoti">开 始 使 用</h1> <br> <textarea id="yulan" placeholder="请在这里输入你的BBcode代码"></textarea> <button class="anniu" onclick="jiexi()">点击预览</button> <br>
- <h1 class="biaoti1">↓下面预览↓</h1>
- <div id="output">
- <pre id="output1"></pre>
- </div>
- </div> <br>
- </body>
- </html>
复制代码
|
|