百度編輯器 UEditor 用 highlight.js 庫實(shí)現(xiàn)代碼高亮

【一鍵復(fù)制】

所用插件：clipboard.js

Github：https://github.com/zenorocha/clipboard.js

先來看一下自帶的 Demo  

    <!-- 1. Define some markup -->
    <textarea id="bar">hello</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>
    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

button 的 data-clipboard-action="cut" 剪切

button 的 data-clipboard-action="copy" 復(fù)制 

然后可以看到 button 的 data-clipboard-target 屬性值=要進(jìn)行復(fù)制的目標(biāo)元素的 id。

那么我們就要在每一個 pre 里面都要添加一個 data-clipboard-target 屬性不同的 button 按鈕，并且要為這個 pre 增加一個和 button 的 data-clipboard-target 屬性一樣的 id。最后調(diào)用 demo 里的 js。

那么開始：

引入 clipboard.min.js。

<script src="url/static/js/clipboard.min.js"></script>

找到以前用來循環(huán)插入 <code></code> 的代碼改為：

<script type="text/javascript">
    var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = '<button class="btn" data-clipboard-action="copy">COPY</button><code id="mycode">'+mycode+'</code>';  //在 code 層前面增加了一個 button
    }
</script>

為 pre 循環(huán)增加 id，并為 pre 內(nèi)的 button 增加 data-clipboard-target 屬性

<script>
  $("pre").each(function(){
   $(this).attr('id',"pre"+$(this).index());
    var btns = $(this).find("button");
     $(btns).attr('data-clipboard-target',"#pre"+$(this).index())
});
</script>

直接復(fù)制 demo 目錄內(nèi) target-textarea.html 的 js 代碼

  <!--這個是官方 demo 的用法，也可以用我博客上的 js，增加了個復(fù)制成功的提示，交互更好些。-->
    <script>
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

改改 css

pre {
position: relative; 
}
pre .btn{ 
display: none;
position: absolute;
top:0;
right: 0;
background: #333;
color: #9c9c9c;
border: 1px solid #232323;
}
pre .btn:hover{ 
color: #fff
}
pre:hover .btn{
display: block;
}

完成！該有的效果都有了，應(yīng)該不會再動了。