刚刚 @良心 同学更新了一下 Deve 主题，添加了一个「文章编辑器应用主题样式」选项。周良好奇了一下，所以拆分了一下 Deve 的更新包：

原来在 WordPress 3.0 以后，有一个新的实用功能：可以更改默认后台编辑器（TinyMCE）的样式，实现在后台可视化编辑器模式下直接预览日志内容的 编排，并且与发表后的文章浏览样式保持一致 ，不需要转到前台查看日志编辑情况。WordPress 3.21默认主题 Twenty Eleven 已集成了该功能，默认主题 Twenty Eleven 功能强大，集成了众多 WordPress 新功能，到目前为止，我还是没用过比这主题更强的的。

下面来说一下应该如何操作。PS：感谢 @良心 同学的指导

打开默认主题 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 风格相匹配。
关键就是这句。周良就不用什么主题做示范了，直接上方法！

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

body {
    font: 13px‘Microsoft YaHei’,
    微软雅黑,
    Arial,
    Lucida Grande,
    Tahoma,
    sans - serif;
    color: #000;
    text - shadow: 0px 1px 0px#d1d1d1;
    width: 700px;
}
ul li {
    list - style: square inside;
    line - height: 24px;
}
h1 {
    font - size: 18px;
    line - height: 185 % ;
}
h2 {
    font - size: 16px;
    line - height: 185 % ;
}
h3 {
    font - size: 14px;
    line - height: 185 % ;
}
ul,
ol,
dd,
pre,
hr {
    margin: 0 0 10px 0;
}
p {
    line - height: 185 % ;
    text - indent: 2em;
    margin: 0 0 10px 0;
}
blockquote {
    width: 660px;
    color: #4e6384;
    line - height: 23px;
    margin: 5px auto 5px auto;
    padding: 10px;
    clear: both;
    border: 1px solid#ccc;
}
code {
    width: 660px;
    font: 12px / 17px tahoma,
    arial,
    sans - serif;
    color: #4e6384;
    display: block;
    margin: 5px auto 5px auto;
    padding: 10px;
    border - left: 3px solid#8391A7;
    border - right: 1px solid#8391A7;
    border - top: 1px solid#8391A7;
    border - bottom: 1px solid#8391A7;
}
blockquote td {
    border - bottom: 1px solid#ccc;
    padding: 2px;
}
/ 图文混排 /img.centered {
    display: block;
    margin - left: auto;
    margin - right: auto;
    margin - bottom: 10px;
}
img.alignnone {
    margin: 0 0 10px 0;
    display: inline;
}
img.alignright {
    margin: 0 0 10px 10px;
    display: inline;
}
img.alignleft {
    margin: 0 10px 10px 0;
    display: inline;
}.aligncenter {
    display: block;
    margin - left: auto;
    margin - right: auto;
    margin - bottom: 10px;
}.alignright {
    float: rightright;
    margin: 0 0 10px 10px;
}.alignleft {
    float: left;
    margin: 0 10px 10px 0;
}

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

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

这里的 /css/editor-style.css 代表的是 editor-style.css 文件在主题中的地址，如果你的主题中没有 css 这个文件夹，您可以直接把editor-style.css 文件拖到主题目录中，在 functions.php 中就不需要把 /css 这个文件夹加进去了。

到目前文章，基本都已经完成咯~~~~

下图是周良博客的后台文章编辑器截图：

但由于后台的编辑器与发表后的文章（前台）出于不同的样式框架中，在您修改主题的时候，只需要将主题 style.css 中与正文相关的样式复制出来，并去掉具体的选择器即可，比如我上面的样式代码，也可以参考默认主题 Twenty Eleven 中的 editor-style.css，关键是要设置body的宽度与您的主题正文部分相同。

如果您看了此文，修改主题的时候有困难，可以给周良留言，或者在谷歌搜索一下类似的教程。