百度编辑器ueditor前台代码高亮无法自动换行解决方法
更新时间：2013年12月12日 17:19:25 作者：
这两天本站成功安装整合了百度编辑器ueditor，用着还挺不错，但是遇到了点小问题
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
问题描述：
在内容里面插入代码高亮显示，后台编辑器中是可以自动换行的，但是发表后，在前台查看，发现代码不能自动换行，直接超出了内容页的边界，极不美观，虽然复制是可以完整的。
解决办法：
找到高亮代码显示的css文件 /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
具体的路径根据你的ueditor做改动
找到
复制代码 代码如下:
.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;
改成
复制代码 代码如下:
.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;
就是加上 word-break:break-all;
可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了
最终效果
相关文章
本文搜集了 22 个 Web 在线编辑器，它们基本代表了当前 Web 编辑器的现状。2010-06-06
UEditor是一个开源免费的编辑器，由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码2014-05-05
因为项目的关系，研究了一下Office的在线编辑功能，写出来共享一下。2010-06-06
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
作为程序员在写博客文章的时候，经常要插入些代码片断，很多博客系统都提供代码语法着色高亮显示的功能或插件，让代码显示更直接明了2012-09-09
fckeditor的配置教程，看了下面的文章应该就差不多了2008-08-08
有不少朋友现在也喜欢用asp下用fckeditor编辑器了，下面是具体的使用方法。需要的朋友可以参考下。2009-12-12
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板2014-06-06
这篇文章主要介绍了UEditor编辑器自定上传图片或文件路径的方法,需要的朋友可以参考下2014-05-05
在调试网站后台时,遇见用EWEBEDITOR编辑内容时,不能从其他文件来源粘贴到里面.2010-05-05
FCKLang是语言包对象，您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了，比如：MyAlbum打开我的像册。注意大小写！至此我们的添加工作已完成。2010-06-06
最新评论