bbcode 预览工具

我是李君子 · 发表于 2024-5-8 20:02:52

前言
----使用地址----
https://love-kogasa.github.io/FJST/Bbcode.html
----MoreTool----
https://love-kogasa.github.io/FJST/
欢迎投稿( 投稿和使用都是免费的 ) / 加群讨论

Let's go
使用Bbcode.js

<!doctype>
<html>
<head>
<title>bbcode预览工具</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/bbcodejs/bbcode.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
</head>
<body style="padding: 5%;background-color: #9A9;">
<nav class="demo imponent">
<a class="brand">
<h2><xmp></> Bbcode Writer</xmp></h2>
</a>
</nav>
<script>function conv( text, out ){
out.innerHTML = new bbcode.Parser().toHTML( text );
}</script>
<br>
<br>
<div class="flex two">
<div>
<article class="card" style="box-shadow: 0px 5px 1em #AAA;">
<header>
<h1>InPut BBCODE</h1>
</header>
<footer>
<div contenteditable id="inp" style="border: 1px solid #AAA; padding: 2%; border-radius: 5px;"></div>
<button onclick="conv( inp.innerText, outp )">预览</button>
</footer>
</article>
</div>
<div>
<article class="card" style="box-shadow: 0px 5px 1em #AAA;">
<header>
<h1>OutPut BBCODE</h1>
</header>
<footer>
<div id="outp">try input some text</div>
</footer>
</article>
</div>
</div>
</body>
</html>

复制代码

借物表
Bbcode.Js 一个coffeeScript制作的bbcode js解析器
PicnicCss 一个好看轻量级Css库
Nomore

展示
Screenshot_2024-05-08-19-39-37-622_com.android.browser.jpg

[其他] bbcode 预览工具