Tạo nút copy to clipboard cho khung chứa code

Thẻ tag pre thông thường vẫn được sử dụng làm khung chứa code trong bài viết nội dung về thủ thuật, thế nhưng chỉ mỗi khung chứa code thôi có thể nhìn sẽ đơn điệu thay vào đó chúng ta nên thêm một button copy clipboard hiển thị trong khung đó đẻ người đọc dễ dàng sao chép nội dung trong khung với chỉ một lần click

Như hình minh họa ở trên nút copy to clipboard nằm trên góc phải của khung và hộp thoại thông báo đã sao chép khi click vào nút nằm bên dưới góc trái màn hình. Tác dụng của nút copy to clipboard thay vì người đọc bôi đen tất cả nội dung trong khung chứa code sau đó chuột phải chọn copy thì thay vào đó rút gọn lại thao tác với nút click copy rất thuận tiện.

Cách làm cũng tương đối đơn giản, các bạn làm theo các bước sau đây

Bước 1: chèn code css trước thẻ đóng </head>

<b:if cond='data:view.isSingleItem'>

<b:tag name='style'>/* <![CDATA[ */

pre {

    display: block;

    position: relative;

    font: 16px Arial, Roboto, sans-serif;

    overflow: auto;

    border: 1px solid rgba(0, 0, 0, 0.12);

    margin: 0;

    padding: 15px;

    line-height: 1.6em;

    white-space: nowrap;

}

pre>button {

    position: absolute;

    top: 0;

    right: 0;

    z-index: 2;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    background: 0;

    border: 0;

    border-radius: 0;

    -webkit-box-shadow: none;

    box-shadow: none;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    height: 38px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0;

    min-width: auto;

    padding: 0;

    width: 38px;

}

pre>button:hover:after {

    content: attr(data-title);

    border-radius: 2px;

    background: rgba(95, 99, 104, .9);

    color: #fff;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    font: 500 12px/12px Arial, Roboto, sans-serif;

    margin-left: -38px;

    opacity: 1;

    padding: 6px 8px;

    pointer-events: none;

    position: absolute;

    -webkit-transition: opacity .2s;

    transition: opacity .2s;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    z-index: 1020;

}

.modals-dialog {

    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.302), 0 4px 8px 3px rgba(60, 64, 67, 0.149);

    -webkit-font-smoothing: antialiased;

    letter-spacing: .2px;

    -webkit-align-items: center;

    align-items: center;

    background-color: #202124;

    border: none;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    bottom: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    left: 0;

    margin: 20px;

    max-width: 640px;

    min-height: 50px;

    padding: 8px 15px;

    position: fixed;

    right: auto;

    text-align: left;

    top: auto;

    white-space: normal;

    z-index: 99;

}

.modals-dialog-content {

    font-size: 15px;

    font-weight: 400;

    color: #ffff;

}

.modals-dialog-buttons {

    margin-left: 15px;

}

/* ]]> */</b:tag>

</b:if>

Bước 2: Chèn code script trước thẻ đóng </body>

<b:if cond='data:view.isSingleItem'>

<script>//<![CDATA[

$(function() {

  var pre = document.querySelectorAll('.post-body>pre')

  $(pre).each(function(i) {

    $(this).append('<button data-label="Click To Copy" data-title="Copy" type="button"><svg width="24px" height="24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg></button>')

    var button = $(this).find('button')

    $(button).on('click', function() {

      var range = document.createRange()

      range.selectNode(pre[i])

      window.getSelection().addRange(range)

      try {

        var successful = document.execCommand('copy'),

          msg = successful ? 'successful' : 'unsuccessful'

      } catch (err) {

        console.log('Oops,unable to copy')

      }

      window.getSelection().removeAllRanges()

      $('body').append('<div class="modals"><div class="modals-dialog"><div class="modals-dialog-content flex align-center">Đã sao chép vào khay nhớ tạm!<svg class="modals-dialog-buttons" height="21px" width="21px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg></div></div></div>')

      setTimeout(function() {

        $('.modals').remove()

      }, 3000)

      $('.modals-dialog-buttons').click(function() {

        $(this).parents('.modals').remove()

      })

    })

  })

})

//]]></script>

</b:if>

Lưu ý: Theme cần có thư viện jquery, class .post-body là thẻ div bao quanh bài viết, nếu theme không sử dụng class này thay bằng class của theme bạn nhé.

Bước 3: chèn code vào khung

Khi soạn tảo bài viết mới, các bạn cứ soạn bình thường bên phần Viết, khi nào soạn xong các bạn chuyển sang tab HTML bài viết chèn thẻ tag pre vào nội dung các bạn muốn lồng nó trong khung.

Hình minh họa

Trường hợp chỉnh sửa lại bài viết cũ thì chèn thẻ pre vào bên tab HTML bài viết cần chỉnh sửa. Lưu ý khi đã chèn thẻ pre rồi không chuyển qua tab Viết trở lại nhé.