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

2015-5-29 / 2 评论 emlog / Mrxn

本文共计 722 字,感谢您的耐心浏览与评论.

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

点击查看原图

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

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

最终实现了:

点击查看原图

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

点击查看原图

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

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

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

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


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



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

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

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


标签: 代码 emlog kindeditor

转载:转载请注明原文链接 - 修改emlog编辑器kindeditor,使其能够auto显示插入的代码


2条回应:“修改emlog编辑器kindeditor,使其能够auto显示插入的代码”

  1. 不错的方法,如果有类似DZ引用“”的那种框就好了。


发表评论

{view_code_no}