常见问题 您现在的位置是:首页 > 常见问题
用Ueditor让网页支持代码语言显示
来源:惠达浪原创 发布时间:2019-05-10 最后更新:2020-01-14 4836已围观
摘要作为程序开发人员,经常需要在博客站上显示程序代码,如何让这些代码高亮显示,或者说显示的如同IDE编辑器中一样呢?Ueditor自带了这个功能,ThinkCMF也内置了该编辑器,让我们一起来看看怎么用吧。
作为程序开发人员,经常需要在博客站上显示程序代码,如何让这些代码高亮显示,或者说显示的如同IDE编辑器中一样呢?Ueditor自带了这个功能,ThinkCMF也内置了该编辑器,让我们一起来看看怎么用吧。
首先,看看后台如何添加代码语言。其实也非常简单,在编辑文章的时候,点击工具栏上的“代码语言”,选择对应的代码,在出现的灰色编辑框中输入程序代码,例如:
此时,代码看起来是没有任何格式的,这很正常,点击编辑器左上角的 html 按钮,代码有这样一段:
说明代码语言其实是添加了一个样式,这个是Ueditor自己搞的,反正我是不知道怎么解析。不过这不重要,重要的是前端如何显示。
在 Ueditor 文档的“编辑内容展示”部分有明确说明,前端需要对代码进行解析。这很重要,我以前做的模板中就缺少了这部分,导致代码一直不能正确显示。解析有两点需要注意:
-
在模板中引入 js 文件。
请忽略我使用的路径,反正是引入这个 parse.js 就对了,我用的是ThinkCMF,所以是这么个引用方法,如果你是单独使用,写上你自己的路径。
-
在文件的末尾,使用uParse来解析文档。按这个函数的用法,需要抓到内容的上级DOM容器,支持 css 选择器语法,如果你有多个容器,可以通过自定义的样式抓取,我是用 id,反正没有那么多容器。
html文件中,存放内容的DOM:
页面下方的js代码:
$(function () { uParse("#content",{rootPath: "__STATIC__/js/ueditor"}); });
uParse函数的第一个参数就是容器,第二个参数是设置,一般只设置“rootPath”就行了。这个参数是Ueditor目录位置,因此 Ueditor 要根据这个位置去查找其它插件,因此必须设置正确。当然,关于路径,原因和上边一样。
OK,现在就可以了,如果没有什么录入错误,应该就可以显示如下样式的代码了:
namespace app\portal\controller; use cmf\controller\HomeBaseController; class IndexController extends HomeBaseController { public function index() { return $this->fetch(':index'); } }
重要提示:
Ueditor 的解析文件中有 BUG!这不是我瞎说,因为你如果真的按我上边说的去做了,你会发现,当你的文章中包含列表时,无论是有序列表还是无序列表,都会影响到导航栏的显示,这是因为 parse 文件中添加了 li 的样式,但它却是一个影响到全局的样式。网上也有解决办法,但偏偏你能百度到的办法,它们竟然也是错误的!错误是因为把选择器变量写错了,真是无语了。
正确的方法来了!
打开 ueditor.parse.min.js 文件,搜索并找到这段:li{clear:both;},注意是蓝色部分。这是一完整的 javascript 字符串,需要打断,在 li 前边添加选择器,让样式只对选择器内部有效。在 li 前边,添加:"+h+" ,后边的引号后还有一个空格,注意。为了更好地显示效果,在下边做一个对比吧。
另外,如果你的文件不是压缩的,文件名是 ueditor.parse.js,那么注意,不要使用变量 h,而是 selector。
修改前是这样的:
" ul{margin:0;padding:0;}li{clear:both;}"
修改之后是这样的:
" ul{margin:0;padding:0;}"+h+" li{clear:both;}" //如果是未压缩的js文件,那么就是下边这样 " ul{margin:0;padding:0;}"+selector+" li{clear:both;}"
喜欢刨根问底的朋友可能奇怪,为什么不是网上说的 c 而是 h 呢?因为在这句前边有这么一句:
h=this.selector;
我还能说什么呢?这难道不是很清楚了吗?
很赞哦! (539)
上一篇: EasyWeChat获取用户信息时curl错误解决
下一篇: CentOS 安装swoole报错
站点信息
- 网站平台:ThinkCMF 5.1.5
- PHP版本:7.3.31
- QQ交流群: 惠达浪技术交流