这个功能一直想要实现,但一直没有实现,今天忍不住加上去了。
方法:
1、在CSS中加入如下代码。
<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="css">/* 图片caption加框 */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: rightright;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
/* margin: 0; */
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
/* margin: 0; */
}</pre>
</div>
</div>
2、用Live Writer写完后上传图片。然后在线用编辑器打开,点图片,在Caption属性中加入自己想要的文字即可。
可以在编辑器中看html代码如下。其中align="alignnone"
表示图片默认位置,alignright
是右对齐,alignleft
是左对齐,aligncenter
是居中。因为都是CSS控制的,因此都需要在html编辑器中编辑。
<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="html"><img class="wp-caption " style="border-style: initial; border-color: initial; margin-right: 5px; border-image: initial; border-width: 0px;" title="art-Gu-Kailai-420x0" src="http://synyan.cn/t/../art-Gu-Kailai-420x0.jpg?x-oss-process=style/watermark_webp" alt="art-Gu-Kailai-420x0" width="420" height="295" align="right" border="0" />Political scandal ... Bo Xilai and his wife, Gu Kailai and son Bo Guagua.</pre>
</div>
</div>
希琳娜 台湾
哇哈哈 ~ 你居然拿這張照片當範例 ! ^^
十三年前 Internet Explorer 9 · Windows Vistaric83311 山东
@希琳娜 他相当可以,相当应景
十三年前 Maxthon 3 · Windows XP勺子 广东
@ric83311 +1
十三年前 Google Chrome 18 · Mac OS X 10.5S̆̈ 江苏 *
@希琳娜 :呵呵
十三年前 Google Chrome 17 · Windows 7Healson 江苏
这个好像编辑器里就能实现吧?
十三年前 Firefox 11 · Windows XPS̆̈ 江苏 *
@Healson 可以吗?
十三年前 Google Chrome 17 · Windows 7