星空晶体的BBcode预览器的第一个版本

星空*** · 发表于 2024-6-30 19:51:05

本帖最后由星空晶体于 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_194324_com.microsoft.emmx.jpg

实际效果：
苦力怕论坛感谢有你
~~114514~~
哈哈哈
gsggshs
苦力怕论坛
1
Creeper?
Aw man!

后记：此预览器的核心是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>

复制代码

支持一下吧

Lin*** · 发表于 2024-6-30 20:00:13

昨天在写这篇文章的时候就是md转HTML，HTML再转bbs的时候别提多麻烦了，文章发了又发就为了看看效果，要是早有你这个就好了

portedb*** · 发表于 2024-6-30 20:00:39

建议把背景图去掉或者淡化，否则有些看不清

Flash*** · 发表于 2024-7-1 14:35:01

太棒了，终于不需要在论坛闲聊版内开回复贴测试bbcode代码了！！！

[其他] 星空晶体的BBcode预览器的第一个版本

QQ群

访问手机版