UEditor for Typecho插件安装笔记

      访问: 4,335 次      评论    

百度官方推荐的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版本了。 如果插件作者能帮忙更新下就好了!


添加新评论