首页前端开发其他前端知识百度编辑器ueditor前台代码高亮无法自动换行解决方法

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

时间2024-02-10 12:09:03发布访客分类其他前端知识浏览285
导读:收集整理的这篇文章主要介绍了百度编辑器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)使用方法
  • ASP.NET中集成百度编辑器UEditor
  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 百度编辑器ueditor前台代码高亮无法自动换行解决方法
本文地址: https://pptw.com/jishu/608340.html
syntaxhighlighter 去掉右上角问号图标的三种方法 FCKeditor 在chrome中不显示问题

游客 回复需填写必要信息