Ueditor代码高亮

1.在需要代码高亮处引入文件ueditor自带的第三方代码高亮插件

<link rel="stylesheet" href="/static/plugin/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="/static/plugin/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

 2.添加js代码

<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

3.修改shCore.js，添加复制代码和语言显示工具栏

var className = classes.join(' ');
var codeType = className.substr(19).toUpperCase();
html =
    '<div id="' + getHighlighterId(this.id) + '" class="' + classes.join(' ') + '">'
    + (this.getParam('toolbar') ? sh.toolbar.getHtml(this) : '')
    + '<table border="0" cellpadding="0" cellspacing="0" class="s-table">'
    + this.getTitleHtml(this.getParam('title'))
    + '<tbody>'
    + '<tr>'
    + (gutter ? '<td class="gutter">' + this.getLineNumbersHtml(code) + '</td>' : '')
    + '<td class="code" id="code">'
    + '<div class="container">'
    + html
    + '</div>'
    + '</td>'
    + '</tr>'
    + '<tr>'
    + '<td>'
    + '<div id="tool-bar">'
    + '<div title="' + codeType + '" class="code show">' + codeType + '</div>'
    + '<div id="copy-btn" title="复制代码" class="code copy">Copy</div>'
    + '</div>'
    + '</td>'
    + '</tr>'
    + '</table>'
    + '</div>'
;

4.添加新增工具栏样式

.s-table {
   position: relative !important;
}
 
.code.copy {
   background: #353535 !important;
   color: #fff !important;
   padding: 2px 10px !important;
   cursor: pointer !important;
   border-radius: 15px !important;
   border: 1px solid #525252 !important;
   margin-left: 5px !important;
   float: left !important;
   transition-property: border-color, background-color, color;
   transition-duration: .3s;
   transition-timing-function: ease-in;
}
 
.code.copy:hover {
   background: #000 !important;
   color: #bbb !important;
   border: 1px solid #353535 !important;
}
 
.code.show {
   background: #353535 !important;
   color: #fff !important;
   padding: 2px 10px !important;
   cursor: pointer !important;
   border-radius: 15px !important;
   border: 1px solid #525252 !important;
   float: left !important;
   transition-property: border-color, background-color, color;
   transition-duration: .3s;
   transition-timing-function: ease-in;
}
 
.code.show:hover {
   background: #000 !important;
   color: #bbb !important;
   border: 1px solid #333333 !important;
}

5.复制功能实现

// 点击复制代码
$(document).on('click', '#copy-btn', function () {
    var t = $(this).parent().parent().parent().prev().find(".container")[0].innerText;
    // "非法空格"替换
    var Text = t.replace(/ /g, ' ');
    copyText(Text);
    $('table #copy-btn').text('Copy');
    $(this).text('Copied!');
});
 
/**
 * 复制的方法
 * @param { String } Text 复制的内容
 */
function copyText(Text) {
    var code_input = document.createElement('textarea');
    code_input.value = Text;
    document.body.appendChild(code_input);
    code_input.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    code_input.style.display = 'none';
}

至此DIY完毕。

效果如下图：

1. 25