之前看到一些掘金文章有比较丰富的效果,包括文字色彩,可展开的详情面板。我猜测掘金文本编辑器还可支持其他交互特性,比如html5 的所有标签。我随便试了几个,给大家贴出来,希望有点用处。以後大家的博客可以放點BGM啥的
插入音频或视频
比如这样,给你的掘金文章加点BGM,舒缓下气氛。送你们一首牛奶咖啡的《暖春》,点击播放
还可以加 checkbox,虽然没啥暖用
inline style
inlineStyle
可以帮助你美化博客中的一些文字颜色等,但是<style>
是不起作用的,类似于<script>
一样被XSS防御给干掉了
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#BEF7C8" class="palette"></div>
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#86E6C8"></div>
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#36CFC9"></div>
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#209BDD"></div>
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#1581E6"></div>
<div style="display: inline-block;margin:10px;width:20px;height:20px;background:#0860BF"></div>
可展开标签
<details>
<summary>点击展开</summary>
详细内容
</details>
点击展开
详细内容,比如你可以放一段长代码var __circlebarOption = __that.option.circlebar;
var __fadeSide = __circlebarOption.fadeSide;
var __prettify = __circlebarOption.prettify;
var __freqByteData = __that.__rebuildData(freqByteData, __circlebarOption.horizontalAlign);
var __angle = Math.PI * 2 / __freqByteData.length;
var __maxHeight, __width, __height, __left, __top, __color, __pos;
var circleRadius = __circlebarOption.circleRadius;
var __particle = __circlebarOption.particle;
var __maxParticle = __circlebarOption.maxParticle;
var __showProgress = __circlebarOption.showProgress;
var __progress = __that.audioSrc.currentTime / __that.audioSrc.duration;
var __offsetX = 0;
if (__circlebarOption.horizontalAlign !== 'center') {
__fadeSide = false;
__prettify = false;
}
// clear canvas
__that.context2d.clearRect(0, 0, __that.width, __that.height);
__that.context2d.save();
__that.context2d.translate(__that.width / 2 - .5, __that.height / 2 - .5);
if (__circlebarOption.shadowBlur > 0) {
__that.context2d.shadowBlur = __circlebarOption.shadowBlur;
__that.context2d.shadowColor = __circlebarOption.shadowColor;
}
// generate and render particles if enabled
if (__particle) {
const deg = Math.random() * Math.PI * 2;
__that.particles.push(new Particle({
x: (circleRadius + 20) * Math.sin(deg),
y : (circleRadius + 20) * Math.cos(deg),
vx: .3 * Math.sin(deg) + Math.random()*.5 - .3,
vy: .3 * Math.cos(deg) + Math.random()*.5 - .3,
life: Math.random() * 10,
// color: __circlebarOption.color
}));
// should clean dead particle before render.
if (__that.particles.length > __maxParticle) {
__that.particles.shift();
}
__that.particles.forEach((dot) => { dot.update(__that.context2d); });
}
RTL 文字方向
<!-- 改变文本方向 -->
<p>横批不应该从左往右</p>
<p><bdo dir="rtl">横批不应该从左往右</bdo></p>
横批不应该从左往右
横批不应该从左往右
没用的特別提醒

这是特别的提醒,但是麻蛋 文章不发布的话 根本没预览不了特别提醒效果 但我觉得这种左边border真的蛮好看的。
好吧,自己用css style
實現了一下,预览中也有效果哦~:
!
有谁能解决下这个特别提醒写法没用的问题~ 感叹号去哪儿了。。:before Content 没用,只能用文字内容替代了。第三行内容
<div class="warning" style="position:relative;padding:10px 20px;border-left: 4px solid #f75151;background:#f8f8f8 ">
<p style="position: absolute;
left: -12.5px;
background: #f75151;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;"><b>!</b></p>
有谁能解决下这个特别提醒写法没用的问题~
感叹号去哪儿了。。:before Content 没用,只能用文字内容替代了。
第三行内容
</div>
好吧,掘金的同学不用忙活了。特别提醒就这么手写也行,就是累了点