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

与文章样式一样的编辑器

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

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

问题


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

解决方法


我的解决思路很简单——没有样式,就创造样式。首先请安装Firefox扩展——StylishChrome也有个克隆版,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. 重启浏览器,你也会看到效果的。
ChromeOpera貌似也有类似的方法,各位自己去查一下吧。



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

2 comments now

  1. 真没想,Stylish也能实现这个功能。

    在WLW也有这样的功能,在FF下有Stylish就能实现了。

    回复删除
  2. @loo2k:
    虽说能实现,但到底是土方法,应该没有WLW的好用

    回复删除