حصرياتالمزيد

الاثنين، 19 فبراير 2018

احصل على هذة الاداة من هنا

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



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


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


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

    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. اذا واجهت اي مشكلة ضعها بتعليق





EmoticonEmoticon