EMLOG整合UEditor和代码高亮

前言

因为EMLOG自带的KindEditor编辑起在和代码高亮整合的时候,当文章再次编辑的话总是会多出来换行符,网上找了很多文章,试了多次,解决不了,最后果断换了百度的UEditor编辑器来曲线救国。

整合过程:

1、首先按照《[emlog编辑器]ueditor for emlog升级到4.2版本》这个文章,把kindeditor替换成ueditor,这个插件是百度推荐的,所以可以放心使用。

代码高亮

1、使用SyntaxHighlighter

可以参考这个文章:ueditor for emlog完整安装方法(小指亲测可用)

ueditor其实自带了SyntaxHighlighter的css和js,可以在博客admin/ueditor/third-party/SyntaxHighlighter路径下找到shCoreDefault.css和shCore.js。如果admin设置了权限无法访问,可以移动到其他地方,例如content/目录下,自定义一个SyntxtHighlighter目录,把两个文件放在目录下。

然后将下面代码添加到当前模板header.php文件的<head>标签里:

<link href="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />      
<script type="text/javascript" src="<?php echo BLOG_URL; ?>content/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript">      
    SyntaxHighlighter.all();       
</script>

2、使用谷歌prettyprint代码高亮

EMLOG5.3以上已经内置的有谷歌prettyprint代码高亮,

这里可以根据这个文章的原理:Kindeditor与SyntaxHighlighter整合实现代码着色

原理就是修改pre标签,因为UEditor的pre标签是pre class = brush这种类型的,而谷歌的则是pre class="prettyprint这种类型的,所以就是把ueditor的ueditor.all.min.js中的pre标签修改成这样

<pre id="coder"class="prettyprint lang-'+b+' linenums">'+h+"</pre>

清理缓存

当一切搞定之后,可能会出现上传附件的时候,提示权限不足。

1. 浏览器强制刷新,按ctrl+F5 

2. 如果还没有好,在emlog后台清空博客缓存.(后台-数据-更新缓存)

3. 如果连清空缓存这一步也出现了这个错误,有ftp进入/content/cache/删除这个文件夹下的所有php文件

这样清理缓存之后,就可以了。

参考文章:

  1. [emlog编辑器]ueditor for emlog升级到4.2版本

  2. ueditor for emlog完整安装方法(小指亲测可用)

  3. Kindeditor与SyntaxHighlighter整合实现代码着色

  4. 解决emlog后台“权限不足,token error”

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment