手机
当前位置:查字典教程网 >编程开发 >网页编辑器 >百度编辑器ueditor前台代码高亮无法自动换行解决方法
百度编辑器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写法不一样,只要对应的位置加上这个强制换行就可以了

最终效果

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

【百度编辑器ueditor前台代码高亮无法自动换行解决方法】相关文章:

fckeditor在php中的用法(添加于修改写成了函数)

ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法

Office文档在线编辑的一个实现方法

javascript 在线文本编辑器实现代码

百度ueditor组件上传图片后如何设置img里的alt属性

asp.net+FCKeditor上传图片显示叉叉图片无法显示的问题的解决方法

网页编辑器FCKeditor 2.6.4精简配置方法

Ewebeditor 不能粘贴或复制的解决方法

Html 编辑器粘贴内容过滤技术详解

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

精品推荐
分类导航