Heim > Web-Frontend > js-Tutorial > cnblogs 代码高亮显示后的代码复制问题解决实现代码_javascript技巧

cnblogs 代码高亮显示后的代码复制问题解决实现代码_javascript技巧

WBOY
Freigeben: 2016-05-16 17:58:35
Original
1178 Leute haben es durchsucht

没想到最近(2012年12月份)实现代码复制问题,要不所有内容都是一行,只有拥有工具的人士才能很快的看到代码,这样代码用起来就简单多了,可以直接复制了啊,不用每次是转化什么的。
这篇文章技术是技术为主,看看他们用了什么方法,需要的朋友可以参考下。为方便备份,先打包一份代码,有需要的自己研究。

复制代码 代码如下:

//#region Copy&Run Code

$(function () {
var hlCodes = $("#cnblogs_post_body div.cnblogs_code");
if (hlCodes.length) {
loadEncoderJs();
$.each(hlCodes, function () {
var htmlContent = $(this).html();
$(this).html(htmlContent.replace(/(
){3}/gi, '

'));
if ($(this).find("div.cnblogs_code_hide").length == 0) {
if (parseInt($(this).css("height"), 10) > 30) {
showCopyCode($(this));
var regex = /<script>/gi; <BR>if (regex.test($(this).text())) { <BR>showRunCode($(this)); <BR>} <BR>} <BR>} <BR>}); <BR>} <BR>}); <br><br>function showCopyCode(element) { <BR>$(element).append('<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)">复制代码'); <BR>} <br><br>function loadEncoderJs() { <BR>var encoderJs = document.createElement('script'); <BR>encoderJs.type = 'text/javascript'; <BR>encoderJs.src = 'http://common.cnblogs.com/script/encoder.js'; <BR>var node = document.getElementsByTagName('script')[0]; <BR>node.parentNode.insertBefore(encoderJs, node); <BR>} <br><br>function copyCnblogsCode(element) { <BR>var codeContainer = getCnblogsCodeContainer(element); <BR>var cbCode = getCnblogsCodeText(codeContainer); <BR>var textarea = document.createElement('textarea'); <BR>$(textarea).val(cbCode).select(); <BR>$(textarea).css("width", $(codeContainer).css("width")); <BR>$(textarea).css("height", $(codeContainer).css("height")); <BR>$(textarea).css("font-family", "Courier New"); <BR>$(textarea).css("font-size", "12px"); <BR>$(textarea).css("line-height", "1.5"); <BR>$(codeContainer).parent().html(textarea); <BR>$(textarea).select(); <BR>$("<div>按 Ctrl+C 复制代码</script>
").insertAfter($(textarea));
}

function getCnblogsCodeContainer(element) {
var codeContainer = $(element).parent().parent().parent().find("pre");
if (codeContainer.length == 0) {
codeContainer = $(element).parent().parent().parent().find("div").first();
}
return codeContainer;
}

function getCnblogsCodeText(codeContainer) {
var cbCode = '\n' + $(codeContainer).html()
.replace(/ /g, ' ')
.replace(/
/ig, '\n')
.replace(/]*>/g, '');
cbCode = cbCode.replace(/\n(\s*\d+)/ig, '\n');
cbCode = cbCode.replace(/\n/g, '\r\n');
if (typeof Encoder != undefined) {
cbCode = Encoder.htmlDecode(cbCode);
}
cbCode = $.trim(cbCode);
return cbCode;
}

function showRunCode(element) {
var codeCopyDiv = $(element).find("div.cnblogs_code_toolbar");
if (codeCopyDiv.length) {
$(codeCopyDiv).append('运行代码');
}
}

function runJsCode(element) {
var codeContainer = getCnblogsCodeContainer(element);
var cbCode = getCnblogsCodeText(codeContainer);
var newwin = window.open('', "_blank", '');
newwin.document.open('text/html', 'replace');
newwin.opener = null;
newwin.document.write(cbCode);
newwin.document.close();
}

//#endregion

打包下载
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage