WordPress 后台编辑器样式实现直接预览-DESTLIVE

WordPress 3.0以后,有一个新的实用功能:你可以更改默认后台编辑器(TinyMCE)的样式,实现一个有趣的功能:在后台可视化编辑器模式下直接预览日志内容的编排,并且与前台浏览样式保持一致 ,不需要转到前台查看日志编辑情况。

打开默认主题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的文件,将下面样式复制进去,或者直接下载:editor-style.css文件,并放到css目录中。

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

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