wordpress 修改后台编辑器里内容样式实现直接预览_WordPress教程

wordpress 修改后台编辑器里内容样式实现直接预览_WordPress教程

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

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

将以下代码放到主题的functions.php里:

//比如使用的主题是monkey,那么放在路径monkey/static/css/editor-style.css
add_editor_style('/static/css/editor-style.css');

然后新建editor-style.css文件放到主题monkey目录的static/css/目录下,内容例如:

.mce-content-body{padding:10px 15px;font-family:"PingFang SC","Microsoft Yahei",Verdana,Arial,Helvetica,sans-serif;font-size:14px;}
.mce-content-body{font-size:14px;line-height:30px;}
.mce-content-body h1{font-size:28px;margin:0 0 22px 0;}
.mce-content-body h2{font-size:24px;margin:0 0 22px 0;}
.mce-content-body h3{font-size:20px;margin:0 0 22px 0;}
.mce-content-body a{color:#9b9b9b}
.mce-content-body p{margin:0 0 22px;}
.mce-content-body blockquote{border-left:8px solid #9b9b9b;background:#f5f5f5;padding:10px 22px;margin:0 0 40px;}
.mce-content-body blockquote p{margin:0}
.mce-content-body img{max-width:100%;height:auto;}
.mce-content-body .aligncenter{margin:0 auto;display:block;text-align: center;}

原文链接:https://www.dqzy.cn/2025/05/15/590.html,转载请注明出处。 1、本站所有源码资源(包括源代码、软件、学习资料等)仅供研究学习以及参考等合法使用,请勿用于商业用途以及违法使用。如本站不慎侵犯您的版权请联系我们,我们将及时处理,并撤下相关内容! 2、访问本站的用户必须明白,本站对所提供下载的软件和程序代码不拥有任何权利,其版权归该软件和程序代码的合法拥有者所有,请用户在下载使用前必须详细阅读并遵守软件作者的“使用许可协议”,本站仅仅是一个学习交流的平台。 3、如下载的压缩包需要解压密码,若无特殊说明,那么文件的解压密码则为:www.dqzy.cn。 4、点启资源网是一个免费且专业分享网站源码、图片素材、特效代码、教程文章、站长工具的平台。我们努力给站长提供好的资源!
0

评论0

请先
显示验证码
没有账号?注册  忘记密码?