您现在的位置是：首页 > 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主页左上角的文字的方法

图文教程

相关源码

响应式艺考培训学校机构pbootcms模板html5源码基于PbootCMS免费开源内核开发，为艺考培训学校与艺术机构设计，替换图文即可快速适配全行业需求。响应式布局兼容手机/PC端，数据实时同步，运维效率提升300%。查看源码
(PC+WAP)铝合金门窗定制pbootcms网站模板源码为铝合金门窗、定制门窗企业打造的高性能网站模板，基于PbootCMS开源内核开发，采用HTML5自适应架构，PC与手机端数据实时同步，覆盖全终端用户交互场景。查看源码
(PC+WAP)蓝色钢材加工建筑装修施工材料网站模板下载为钢材加工企业设计的PbootCMS响应式模板，采用PC+WAP双端适配技术，数据实时同步。简洁大气的蓝色工业风格设计，突出钢材加工行业特性，其他制造业用户更换图文内容即可快速应用。查看源码
深蓝色风景摄影机构网站(自适应多端)pbootcms模板该模板基于PbootCMS内核开发，专为风景摄影机构、户外摄影企业设计，采用深蓝色主题传递专业与艺术感，全栈响应式架构确保PC、平板、手机端无缝适配PHP程序结合轻量级SQLite数据库也可以更换MySQL数据库查看源码
HTML5响应式健身俱乐部pbootcms网站模板下载为健身俱乐部、瑜伽中心及运动场馆设计的响应式网站模板，采用PbootCMS内核开发，支持一键替换图文适配健身器材销售、瑜伽工作室等多类型运动健康产业。查看源码
响应式粉色美容整形化妆品pbootcms网站模板开源源码该网站模板为美容整形、化妆品企业设计，采用响应式布局确保在手机、平板及PC端自动适配显示效果。基于PbootCMS内核开发，支持一键替换图文内容快速转换至其他行业应用。查看源码