百度编辑器ueditor前台代码高亮无法自动换行解决方法

更新时间：2013年12月12日 17:19:25 作者：

这两天本站成功安装整合了百度编辑器ueditor，用着还挺不错，但是遇到了点小问题

问题描述：

在内容里面插入代码高亮显示，后台编辑器中是可以自动换行的，但是发表后，在前台查看，发现代码不能自动换行，直接超出了内容页的边界，极不美观，虽然复制是可以完整的。

解决办法：

找到高亮代码显示的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在线编辑器收集
本文搜集了 22 个 Web 在线编辑器，它们基本代表了当前 Web 编辑器的现状。
2010-06-06
免费开源百度编辑器(UEditor)使用方法
UEditor是一个开源免费的编辑器，由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码
2014-05-05
Office文档在线编辑的一个实现方法
因为项目的关系，研究了一下Office的在线编辑功能，写出来共享一下。
2010-06-06
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
作为程序员在写博客文章的时候，经常要插入些代码片断，很多博客系统都提供代码语法着色高亮显示的功能或插件，让代码显示更直接明了
2012-09-09
FCKEditor v2.6 编辑器配置图解教程
fckeditor的配置教程，看了下面的文章应该就差不多了
2008-08-08
ASP下使用FCKeditor在线编辑器的方法
有不少朋友现在也喜欢用asp下用fckeditor编辑器了，下面是具体的使用方法。需要的朋友可以参考下。
2009-12-12
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板
2014-06-06
UEditor编辑器自定义上传图片或文件路径的修改方法
这篇文章主要介绍了UEditor编辑器自定上传图片或文件路径的方法,需要的朋友可以参考下
2014-05-05
Ewebeditor 不能粘贴或复制的解决方法
在调试网站后台时,遇见用EWEBEDITOR编辑内容时,不能从其他文件来源粘贴到里面.
2010-05-05
FCKeditor添加自定义按钮的方法
FCKLang是语言包对象，您只要打开FCK/editor/lang/下面的相应语言包添加相应的名称属性就可以了，比如：MyAlbum打开我的像册。注意大小写！至此我们的添加工作已完成。
2010-06-06