让编辑器的文章外观与你模板一致

有关注HTML的同学应该看过类似的建议吧：诸如<span style="color: #9e0000;" >Text</span>之类还是尽量少用，改用<span class="red">Text</span>，然后在<style>添加相关样式。

这样做的好处是方便管理，以后也便于修改（如果哪一天你换一个颜色风格相反模板，岂不是得把以前文章的颜色都改了？想象一下深色背景加深色文字的情况吧），同时也有利于减少页面的体积。

问题

---

但如果是在编辑文章的话，这样反而会很不爽，因为你在所见即所得编辑器里根本看不到效果。另外还有<blockquote> 、<code>之类的元素也是这样，在编辑器里你只能看到白底黑字，连文字是否在Tag里都看不出来，为此必须经常在HTML模式和所见即所得模式之间切换，简直是烦死人了。

解决方法

---

我的解决思路很简单——没有样式，就创造样式。首先请安装Firefox扩展——Stylish（Chrome也有个克隆版，Stylist），Then，Just Follow Me。

举个例子，我的模板里的<blockquote>的CSS样式是这样的：

1. blockquote {
2. background:#F4F5F7;
3. border:1px dashed #CCCCCC;
4. color:#333;
5. font-family:Georgia,serif;
6. margin:0 20px;
7. padding:10px 20px;
8. }
9.  
10. blockquote a {color: #CC3300 !important;}
11. blockquote a:hover {text-decoration: underline;}

我想要在编辑器里引用也有同样的外观，只需在Stylish的图标上点右键 > 新建样式 > 空白样式，然后把以下文字复制粘贴进去然后保存即可。

1. @namespace url(http://www.w3.org/1999/xhtml);
2.  
3. @-moz-document domain("blogger.com") {
4. blockquote {
5. background:#F4F5F7;
6. border:1px dashed #CCCCCC;
7. color:#333;
8. font-family:Georgia,serif;
9. margin:0 20px;
10. padding:10px 20px;
11. }
12.  
13. blockquote a {color: #CC3300 !important;}
14. blockquote a:hover {text-decoration: underline;}
15. }

注意到了吗？第4到11行与上面的样式是完全一样的，其他样式也一样，复制到上面最后一个“ } ”之前，注意必要的时候，必须加上 !important，你便可以看到效果了，就像题图所展示的那样。

另外宽度也是比较重要的，而需要的代码也不太一样，可以考虑加入以下代码：

1. #postingComposeBox {
2. width:590px; /* 数值的大小依你的模板而定 */
3. border-right:1px dashed #ccc;
4. padding-right:10px; /* 这个与上面的只是为了让编辑器更好看一些 */
5. }
6.  
7. .modal-dialog-content {width:590px !important;} /* 这里与最上面的width是一样的 */
8. .modal-dialog {width:610px !important;} /* 这个要比上面的数值稍大 */

补充

---

1.Quick Heghlighter

上面的代码是用这个Quick Heghlighter生成的，它也支持这种HTML与CSS分开的模式，只要去掉“Combine Style and HTML Code”的选项就行了。

2.不装扩展实现的方法

此方法虽然很绿色，但是很不方便，个人不太推荐。

1. 在Firefox的地址栏输入“about:support”（方法来自Lucifa），然后点“打开所在文件夹”；
2. 进入Chrome（和某浏览器没关系）文件夹，打开userContent.css；
3. 需要写进去的内容与上面写到”Stylish新样式”的内容是一样的，然后，保存；
4. 重启浏览器，你也会看到效果的。
   

Chrome、Opera貌似也有类似的方法，各位自己去查一下吧。

---

说实话，尽管这么做是好看了，但是编辑时依然很麻烦，使用ClipX+Stickies Plugin之类可以节省点时间，但要真正的高效率，还是得靠官方的升级更新啊……