就为了高亮显示之前那篇文章的代码.折腾了一下午加晚上的时间.结果还好.功夫不负有心人.总算是弄好了.

        编辑器用的是:    ueditor for emlog 3.9版本

        这个折腾的时间最长了.后来才找到原因.之前不管怎么替换文件.后台编辑器都不会正常显示.还是显示自带那个编辑器.后来突然想到会不会被缓存了.然后重启了一下.问题总算解决了.

        作者原文:

    --------------------------------------------------------------------------------------------------

        ueditor for emlog这是一个由星知苑出品的hack emlog编辑器的代码（不是插件）。

        【安装方法】：解压本站的ueditor for emlog代码包，用FTP把代码包里的admin文件夹上传到emlog根目录，提示覆盖选择全部覆盖即可。（有覆盖提示的就是正确安装的，没有就是路径错误），这时可以看看后台是否是ueditor编辑器了。（出现错误删掉浏览器的缓存即可）。

    注意：覆盖前请先备份自己的博客。

        【卸载方法】：解压本站的ueditor for emlog代码包，用FTP把repair文件夹下的admin文件夹上传到emlog根目录，提示覆盖选择全部覆盖即可。（有覆盖提示的就是正确卸载的，没有就是路径错误）操作完成后，请更新本地浏览器的缓存。

    注意：因为默认模式下会下载图片到本地，所以请不要删除ueditor文件夹（一般来说图片存在ueditor/php/upload文件夹下）

        【配置方法】：如果要修改相关ueditor的相关设置，只要修改admin文件夹下的ueditor中的editor_config.js文件。

    附：具体修改请参看ueditor的官方文档，如有什么不懂请留言评论。

    所有版本下载：百度网盘 （请根据自己的版本下载适合自己的emlog的编辑器版本）

    --------------------------------------------------------------------------------------------------

        不过虽然后台已经有ueditor编辑器了.但是在预览的时候.代码都没有高亮显示.之后打开Chrome的控制台.看到提示有些文件不存在.遂从ueditor官网下载了1.3.6完整版.把缺少的那些文件放到ueditor文件夹里面补全.之后再预览就正常高亮显示代码了.

        1.3.6 完整版 + 源码

        我这里看到缺少的分别是 ueditor.parse.js .还有 _parse 文件夹下的js文件.干脆就直接把这个文件夹都放进去了.

    QQ截图20140502015954.png

        接下来是让前台也高亮显示代码了.作者也写有一个emlog前台高亮显示插件的.但是用后感觉不太好.主要是复制代码的时候会把行号也给复制了.用的是前台SyntaxHighlighter高亮支持.然后又找了一下.找到了一个让ueditor前台也高亮显示的方法.就是在emlog的模板文件 header.php 中插入下面的代码.我是在<head>标签里面的<?php doAction('index_head'); ?>前面插入的.

        <link href="<?php echo BLOG_URL; ?>admin/ueditor/third-party/Synt
    axHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<?php echo BLOG_URL; ?>admin/
    ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
    <script type="text/javascript">SyntaxHighlighter.all();</script>

        这样前台就会高亮显示代码了.但是你会发现.代码不会自动换行.显示的代码会超出页面.所以还要修改一个地方.才能让它完美的高亮显示出来.

        打开/admin/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css.然后找到下面这段.

    .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;
	border-radius:4px!important;
	border-collapse:separate!important;
}

    修改为:

    .syntaxhighlighter{
	width:100%!important;
	word-break:break-all;
	margin:.3em 0 .3em 0!important;
	position:relative!important;
	overflow:auto!important;
	background-color:#f5f5f5!important;
	border:1px solid #ccc!important;
	border-radius:4px!important;
	border-collapse:separate!important;
}

    也就是添加word-break:break-all;(强制打断并换行的意思).这样前台的高亮显示代码就正常了.

Tags: 代码 高亮 emlog