百度官方推荐的UEditor for Typecho第三方插件,支持Typecho 1.0/0.9/0.8。
1、下载和安装
注:Typecho 1.0/0.9用户请在[控制台/个人设置]中关闭Markdown解析再启用插件!
1)直接下载zip压缩包: 点这里 。
2)解压后,将 UEditor 文件夹放入 /typecho/usr/plugins/ 下,然后到Typecho后台启用插件即可。
2、修改主题文件
为了在页面展示中显示语法高亮,还需要修改一下主题文件,在 footer.php 中加入如下代码:
<!--加入高亮的js和css文件,如果你的编辑器和展示也是一个页面那么高亮的js可以不加载--> <script type="text/javascript" src="<?php $this->options->siteUrl(); ?>usr/plugins/UEditor/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <link rel="stylesheet" type="text/css" href="<?php $this->options->siteUrl(); ?>usr/plugins/UEditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"/> <script type="text/javascript"> //为了在编辑器之外能展示高亮代码 SyntaxHighlighter.highlight(); // UE.getEditor('myEditor'); </script>
3、修复不会自动换行的问题
如果你的内容展示区域不够宽的话,那么代码如果超过显示区域的宽度后,仍然会继续延伸,造成页面不美观。
可以修改 shCoreDefault.css 来加入强制换行的属性:
vi /typecho/usr/plugins/UEditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css
找到如下这一段代码,增加一句 word-break:break-all;
.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; word-break:break-all //增加这一句 }
备注:当修复了自动换行的问题后,另一个问题也随之而来。
因为一行代码显示成两行了,而左侧的行号并未因此而做出改变,这样就会造成高度不统一而错位了。
实际上UEditor 集成的 SyntaxHighlighter 版本较低,是1.5版本的,其官网都已经是3.0.83版本了。 如果插件作者能帮忙更新下就好了!