«

修改emlog编辑器kindeditor,使其能够auto显示插入的代码

时间:2015-5-30 02:25     作者:admin     分类: emlog


我们使用emlog插入代码的时候们应该遇见过这种情况:

点击查看原图

即,代码超出边框的地方显示不全,这样,读者要是想要复制,代码也不方便,只能通过审查元素/源代码来复制了.

我也苦恼这个问题,但是一直没有时间,今晚刚好有时间,就来折腾,百度了一下,没有搜到.....于是就开始了自己的折腾.....

最终实现了:

点击查看原图

我是通过Firebug 来查看元素的时候发现的:

点击查看原图

我就想在<pre class="prettyprint lang-php linenums"> 里面加个css样式来实现auto显示超出部分呢?我直接用Firebug修改后,发现可以,于是就开始编辑器核心文件操作了,本地测试通过.

下面说一下具体的操作步骤:

首先打开admin/editor/plugins/code/ 目录下的code.js

在第49行左右,找到如下代码:


<pre style="overflow:auto" ;class="prettyprint lang-php linenums">html = '<pre class="prettyprint' + cls + ' linenums">\n' + K.escape(code) + '</pre> ';
  修改为如下代码:



<pre style="overflow:auto" ;class="prettyprint lang-php linenums">html = '<pre style="overflow:auto";class="prettyprint' + cls + ' linenums">\n' + K.escape(code) + '</pre> ';

  即可实现auto显示超出部分的代码了 .但是这个修改只是在你修改了code.js之后的文章中插入的代码才有效果,之前的文章想要实现,就只能手动重新插入一遍代码了,当然,如果你有更好的方法,欢迎留言交流.

ps:后面准备给emlog的kindeditor编辑器加入复制/粘贴/折叠代码功能,请关注博客.


标签: 代码 emlog kindeditor

版权所有:Mrxn's Blog
文章标题:修改emlog编辑器kindeditor,使其能够auto显示插入的代码
除非注明,文章均为 Mrxn's Blog 原创,请勿用于任何商业用途,转载请注明作者和出处 Mrxn's Blog

扫描二维码,在手机上阅读

推荐阅读:

评论:
avatar
wys.me 2015-05-30 08:46
不错的方法,如果有类似DZ引用“”的那种框就好了。
commentator
Mrxn 2015-05-30 10:16
@wys.me:嗯 正在努力中……