اضافة زر النسخ الى الحافظة لصناديق الأكواد



السلام عليكم ورحمة
الله وبركاته


 نقدم لكم في هذه التدوينة اضافة ربما قد تكون حصرية فبعد البحث الطويل لم أجد أي موقع عربي
يمتلكها, هذه الأخيرة عبارة عن زر يظهر داخل صناديق عرض الأكواد تقوم وظيفته
بنسخ الأكواد الى الحافظة فقط بالضغط عليه
يمكنك معاينة الاضافة في الموقع


طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    1. ابحث عن </head> وضع فوقه الكود التالي
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js'/>
        <script crossorigin='anonymous' src='https://code.jquery.com/jquery-3.2.1.min.js'/>

        <style>
        pre {
            width:100%;
            background-color: black;
            color: white;
            padding: 1.5em;
            font-size: 1em;
        }
.copy-to-text-div {
    position: absolute;
    display: table;
    right: 0;
    margin-top: -2.3%;
    margin-right: 35px;
}
.copy-to-text-div center {
    text-align: right !important;
}
        .copy-to-text-div a {
            color: #ffffff !important;
    display: inline-block;
    position: relative;
    background: #202a35;
    font-family: droid arabic kufi;
    padding: 3px 8px;
    border-radius: 2px;
    font-size: 10px;
        }
        </style>



    1. ابحث عن </body> وضع فوقه الكود التالي
<script type='text/javascript'>
  var preElements = $(&#39;pre&#39;);
            
            // convert sanitized html into html.
            // https://stackoverflow.com/questions/1248849/converting-sanitised-html-back-to-displayable-html
            function htmlDecode(input){
                var e = document.createElement(&#39;div&#39;);
                e.innerHTML = input;
                return e.childNodes[0].nodeValue;
            }
            
            var preElementHandler = function(index, preElement) {
                var textToCopy = htmlDecode(preElement.innerHTML);
                var hoverLink = document.createElement(&quot;div&quot;);
                var centerTag = document.createElement(&quot;center&quot;);
                hoverLink.setAttribute(&quot;class&quot;, &quot;copy-to-text-div&quot;);
                var innerLink = document.createElement(&quot;a&quot;);
                innerLink.href = &#39;javaScript:void(0);&#39;;
                innerLink.onclick = &quot;&quot;;
                innerLink.setAttribute(&quot;data-clipboard-text&quot;, textToCopy);
                innerLink.innerHTML = &quot;اضغط لنسخ الكود&quot;;
                innerLink.setAttribute(&quot;style&quot;, &quot;color: grey; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;&quot;);

                var clipboard = new Clipboard(innerLink);
                
                $(preElement).append(innerLink);
                clipboard.on(&#39;error&#39;, function(e) {
                    alert(&quot;There was an error copying text to your clipboard. Please use Chrome or Firefox.&quot;)
                });
                
                centerTag.prepend(innerLink);
                hoverLink.prepend(centerTag);
                preElement.prepend(hoverLink);
            };
            
            $.each(preElements, preElementHandler);
        </script>

    1. على حد علمي جميع المدونات تعرض الأكواد في صناديق تكون بين الوسمين <pre>.......</pre> 
    2.  فان كنت تعرض الاكواد بين وسمين مخنلفين مثلا <span>.......</span> قم بتغيير var preElements = $(&#39;pre&#39 الى var preElements = $(&#39;span&#39 ان كنت جديدا في المجال فقط ضع رابط موقعك في تعليق وسوف تحصل على المساعدة ☺


    1. اذا واجهت اي مشكلة ضعها بتعليق




ليست هناك تعليقات:

إرسال تعليق