就为了高亮显示之前那篇文章的代码.折腾了一下午加晚上的时间.结果还好.功夫不负有心人.总算是弄好了.
编辑器用的是: 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文件夹里面补全.之后再预览就正常高亮显示代码了.
我这里看到缺少的分别是 ueditor.parse.js .还有 _parse 文件夹下的js文件.干脆就直接把这个文件夹都放进去了.
接下来是让前台也高亮显示代码了.作者也写有一个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;(强制打断并换行的意思).这样前台的高亮显示代码就正常了.
»本文网址:http://blog.xbys.org/emlog/20.html ;
»除特别标注,本博客所有文章均为原创. 互联分享,尊重版权,转载请以链接形式标明本文地址;
You should type some Chinese word (like "你好") in your comment to pass the spam-check, thanks for your patience!
木有头像就木JJ啦!还木有头像吗?点这里申请属于你的个性Gravatar头像吧!