百度编辑器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写法不一样,只要对应的位置加上这个强制换行就可以了

最终效果

相关文章

  • asp.net 为FCKeditor开发代码高亮插件实现代码

    asp.net 为FCKeditor开发代码高亮插件实现代码

    昨天已经将BlogEngine的可视化编辑器换成了FCKeditor,作为一个程序员,在博客中插入代码是很重要的一块。网上现有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到InsertCode的目的。这个方法非常麻烦,当要使用FCKeditor新版本时都要重新修改这两个文件,非常影响我们的效率。
    2008-08-08
  • fckediter javascript事件函数代码

    fckediter javascript事件函数代码

    fckediter javascript事件函数代码,另外fckeditor的可以扩展性不错,大家可以学习下,具体的代码,可以参考脚本之家以前发布的文章。
    2009-12-12
  • UEditor 编辑器跨域上传解决方法

    UEditor 编辑器跨域上传解决方法

    在使用 UEditor 编辑器 时遇到了跨域的问题,导致无法发图片,原因是由于 iframe 中的 src 跨域造成的
    2013-06-06
  • 彻底解决ewebeditor网站后台不能上传图片的方法

    彻底解决ewebeditor网站后台不能上传图片的方法

    随着windows操作系统和IE浏览器版本的不断推出,很多客户都渐渐放弃了IE6,IE7,使用上了IE8浏览器,但是突然发现自己网站后台里面的eWebEditor文本编辑器的插入图片等等按钮失效了,鼠标点击后什么反应都没有,IE浏览器左下角显示一个黄色的感叹号提示错误,就以为是网站空间、服务器中毒了呢,一时间纷纷都来找我们询问
    2012-03-03
  • SyntaxHighlighter 去掉右侧滚动条的方法

    SyntaxHighlighter 去掉右侧滚动条的方法

    SyntaxHighlighter这个是一个高亮插件。现在被用于很多网站的代码显示。但是SyntaxHighlighter3.0.83,由于自适应宽和高,导致一直有滚动条的问题
    2020-03-03
  • 新浪博客在线编辑器傻瓜调用版(2007.11.1第四次修正)提供下载了

    新浪博客在线编辑器傻瓜调用版(2007.11.1第四次修正)提供下载了

    新浪博客在线编辑器傻瓜调用版(2007.11.1第四次修正)提供下载了...
    2007-11-11
  • jsp Ewebeditor使用说明

    jsp Ewebeditor使用说明

    一、部署方式: 1、直接把压缩目录中的文件拷贝到您的网站发布目录下; 2、配置对应WEB-INF下文件,把eWebEditor文件夹下WEB-INF/web.xml中
    2008-10-10
  • javascript fckeditor编辑器取值与赋值实现代码

    javascript fckeditor编辑器取值与赋值实现代码

    这篇文章对于使用fckeditor编辑器的朋友是个不错应用,主要介绍的是js对fckeditor的取值与赋值操作,fckeditor是个不错的比较方便的扩展功能的编辑器。
    2010-05-05
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板
    2014-06-06
  • FCKeditor 2.6.6在ASP中的安装及配置方法分享

    FCKeditor 2.6.6在ASP中的安装及配置方法分享

    FCKeditor目前的最新版本是2.6.6,在网上搜索此版本的配置方法,发现很少有asp的配置方法,以下就把自己的一些配置经验分享给有需要的你。
    2012-03-03

最新评论