常见问题 您现在的位置是:首页 > 常见问题

用Ueditor让网页支持代码语言显示

来源:惠达浪原创 发布时间:2019-05-10 最后更新:2020-01-14 826已围观

摘要作为程序开发人员,经常需要在博客站上显示程序代码,如何让这些代码高亮显示,或者说显示的如同IDE编辑器中一样呢?Ueditor自带了这个功能,ThinkCMF也内置了该编辑器,让我们一起来看看怎么用吧。

作为程序开发人员,经常需要在博客站上显示程序代码,如何让这些代码高亮显示,或者说显示的如同IDE编辑器中一样呢?Ueditor自带了这个功能,ThinkCMF也内置了该编辑器,让我们一起来看看怎么用吧。

首先,看看后台如何添加代码语言。其实也非常简单,在编辑文章的时候,点击工具栏上的“代码语言”,选择对应的代码,在出现的灰色编辑框中输入程序代码,例如:

image.png

此时,代码看起来是没有任何格式的,这很正常,点击编辑器左上角的 html 按钮,代码有这样一段:

<pre class="brush:html;toolbar:false"></pre>

说明代码语言其实是添加了一个样式,这个是Ueditor自己搞的,反正我是不知道怎么解析。不过这不重要,重要的是前端如何显示。

在 Ueditor 文档的“编辑内容展示”部分有明确说明,前端需要对代码进行解析。这很重要,我以前做的模板中就缺少了这部分,导致代码一直不能正确显示。解析有两点需要注意:

  1. 在模板中引入 js 文件。

    <script src="__STATIC__/js/ueditor/ueditor.parse.min.js"></script>

    请忽略我使用的路径,反正是引入这个 parse.js 就对了,我用的是ThinkCMF,所以是这么个引用方法,如果你是单独使用,写上你自己的路径。

  2. 在文件的末尾,使用uParse来解析文档。按这个函数的用法,需要抓到内容的上级DOM容器,支持 css 选择器语法,如果你有多个容器,可以通过自定义的样式抓取,我是用 id,反正没有那么多容器。

    html文件中,存放内容的DOM:

    <div id="content"></div>

    页面下方的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;

我还能说什么呢?这难道不是很清楚了吗?

很赞哦! (87)


站点信息

  • 网站平台ThinkCMF 5.1.5
  • PHP版本:7.3.13
  • QQ交流群: 惠达浪技术交流
0.185222s