您现在的位置是：首页 > cms教程 > DedeCMS教程DedeCMS教程

DedeCMS编辑器变成所见即所得的方法

宛儿2023-09-19DedeCMS教程已有人查阅

导读DedeCMS的默认编辑器的正文编辑区域显示效果不是非常友好，主要问题是字体太小，行间距也很小，看起来密密麻麻的，非常头疼。而且段落首行没有缩进，段落之间没有适当的间隔

DedeCMS的默认编辑器的正文编辑区域显示效果不是非常友好，主要问题是字体太小，行间距也很小，看起来密密麻麻的，非常头疼。而且段落首行没有缩进，段落之间没有适当的间隔，每行文字的长度也与发布后的页面显示的宽度不一样，这样用起来非常不方便。
其实这是可以轻松改变的。我们在编辑器里看到的文件的样式其实和正文一样，也是由一份CSS文件控制的，这份文件的位置在include/ckeditor/contents.css
打开这份文件，你会发现里面的样式少的可怜，怪不得这么难看。
为了能够使编辑器达到所见即所得的编辑效果，我们可以把它的CSS设计得跟正文一样。
首先在Body的样式中加入下面的内容

width:712px;

这表示每行的较大长度是712px（可根据你网站正文的宽度自行调整）
然后再在末尾增加段落的显示样式如下：（首行缩进2个字符，段落间距8Px，行高25px）

P{
text-indent:2em;
margin-bottom:8px;
line-height:25px;
}

重新登录你的后台，在编辑器输入内容，怎么样，好看多了吧，效果如下图所示，赶紧修改自己网站的编辑器显示效果吧！

本文标签：

很赞哦！ ()

上一篇：DedeCMS怎么从子目录移动到根目录

下一篇：修改DedeCMS主页左上角的文字的方法

图文教程

相关源码

(自适应)刷卡pos机数据移动支付设备电子科技pbootcms模板下载本模板为POS机设备制造商、移动支付终端服务商和科技企业设计，基于PbootCMS系统开发，提供完整的在线展示平台解决方案，满足支付设备行业特有的展示需求。查看源码
(自适应HTML5)响应式智能设备人工智能机器pbootcms源码免费下载这款基于PbootCMS开发的网站模板为人工智能和智能设备行业设计，采用现代化科技风格，突出产品的智能特性和技术创新。模板架构合理，功能完善，能够有效展示各类智能产品的核心功能和解决方案。查看源码
(自适应响应式)高端网站建设设计公司互联网营销网站pbootcms模板本模板基于PbootCMS内核开发，为网站建设公司和互联网营销企业量身打造。采用响应式设计，适配各种移动设备，提供统一的后台管理体验查看源码
响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计，采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发，支持一键替换图文内容快速转换至其他行业应用。查看源码
(PC+WAP)生活资讯百科新闻门户类pbootcms网站模板为生活资讯、百科门户类企业打造的高性能网站模板，基于PbootCMS开源内核开发，采用HTML5响应式架构，PC与手机端实时数据同步，覆盖全终端用户浏览场景。查看源码
帝国cms7.5淘宝客电商品牌特价带手机站带会员模板下载为电商品牌特价展示设计的帝国CMS模板，集成PC端与移动端双平台适配。采用瀑布流商品布局，支持品牌分类聚合展示，突出特价促销视觉冲击力。查看源码