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

图文教程

相关源码

(自适应手机端)seo博客网站模板新闻资讯网站源码下载本模板为SEO博客及新闻资讯类平台深度定制，采用PbootCMS内核开发。通过模块化设计实现多行业快速适配，仅需替换图文内容即可转型为医疗、教育、科技等领域网站。响应式布局确保在手机、平板等设备上获得一致浏览体验。查看源码
(自适应)摄像头安防电子设备pbootcms源码下载本模板基于PbootCMS系统开发，为安防电子设备企业设计，特别适合监控摄像头、安防系统等产品的展示。采用响应式技术，确保各类设备参数和功能在不同终端上都能清晰呈现。查看源码
(自适应)品牌创意设计作品工作室pbootcms模板下载该模板适用于品牌策划、艺术设计、广告创意公司官网，亦可通过替换图文快速适配其他行；高端创意设计公司工作室网站源码极简代码架构、艺术化视觉布局、企业级功能扩展性。查看源码
(PC模板)工商公司注册会计财务记账pbootcms模板源码下载基于PbootCMS的工商财税行业网站系统，手工编写前端代码确保执行效率，双端自适应设计，支持后台实时更新服务价格和政策文件。查看源码
(自适应)互联网建站网络公司个人工作室网站模板基于PbootCMS内核开发，围绕「技术方案展示」「成功案例库」「服务流程说明」三大模块构建，支持PC与移动端数据实时同步。附带包含客户评价、行业解决方案的完整测试数据包查看源码
(PC+WAP)绿色产品环保设备垃圾桶厂家公司网站pbootcms模板为垃圾桶生产商、环保设备企业打造的高端响应式门户模板，基于PbootCMS开源内核深度开发。采用HTML5自适应架构，无缝实现PC与手机端数据实时同步与交互优化查看源码