改变 WordPress 后台编辑器样式实现直接预览前台样式

一直想实现直接在wordpress编辑器中直接预览文章发布成功后的样子，今天在知更鸟中找到了方法。原来在WordPress 3.0 以后，有一个新的实用功能：你可以更改默认后台编辑器（TinyMCE）的样式，实现一个有趣的功能：在后台可视化编辑器模式下直接预览日志内容的编排，并且与前台浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题Twenty Eleven已集成了该功能，默认主题Twenty Eleven功能强大，集成了众多WordPress新功能。

打开默认主题Twenty Eleven的functions.php，会看到一句加了明确注释的代码：

// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

注释的中文大概意思为：可视化编辑器与主题editor-style.css风格相匹配。

关键就是这句。下面以本博客主题为例，轻松实现这一功能。

首先，新建一个名称为：editor-style.css的文件，将下面样式复制进去，并放到本主题css目录中。

body {
font-family: Tahoma,Helvetica,'宋体',SimSun,sans-serif;
width: 650px;
word-break: break-all;
}

h2{
padding-bottom: 5px;
border-bottom: 1px dashed #AAA; 
margin-bottom: 5px;
font-size: 20px;
}

h3 {
padding-bottom: 5px;
border-bottom: 1px dashed #AAA;
font-size: 20px;
}

h4{
font-size:16px
}

p {
text-indent: 2em;
line-height: 26px;
font-size: 14px;
}

img {
display: block;
margin: 0 auto;
height: auto;
max-width: 100%;
border: 1px solid #C60;
}

a:link, a:visited {
color: #C60;
}

pre {
border: 1px solid #E1E1E8;
background-color: #fdf6e3;
overflow: auto;
}

code{
padding:0 4px;
color:#C33
}

blockquote{
padding:2px;
background-color:#ddd
}

blockquote p:before{
content:"“";
font-family:"黑体"
}

blockquote p:after{
content:"”";
font-family:"黑体"
}

.dmys {
display: table;
margin: 0 auto;
padding-right: 23px;
border: 1px solid #bfbfbf;
border-radius: 5px;
background-color: #f2f2f2;
background-image: linear-gradient(to bottom,#f2f2f2,#f2f2f2);
box-shadow: inset 0 1px 0 #fff,inset 0 -1px 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px rgba(0,0,0,.2);
text-shadow: 0 1px 0 rgba(255,255,255,.5);
letter-spacing: 5px;
}

其次，打开主题的functions.php模版文件，加入一句：

//后台预览
add_editor_style('/css/editor-style.css');

由于后台编辑器与前台处于不同的样式框架中，所以如果你想改造其它主题，只需将主题style.css中与正文相关的样式复制出来，并去掉具体的选择器即可，比如我上面的样式代码，也可以参考默认主题Twenty Eleven中的editor-style.css，关键是要设置body的宽度与你的主题正文部分相同。