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


我们使用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编辑器加入复制/粘贴/折叠代码功能,请关注博客.



手机扫码阅读

四川【移动】免流更新合集 --- 免流教程(图文)+tools(软件/脚本)+视屏(手机操作视屏)-防和谐,请回复即可看见

利用border来设置emlog个性的边框 - 友情链接

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