عيد الاضحى المبارك


مواضيع تهمك

ركن تطوير المواقع قسم يختص بشرح التركيب و الترقية و الإضافات و القوالب وملفات التعريب لبرنامج الووردبريس ومدونة بلوجر.

انشاء مربع الاكواد لمحرر ckeditor

السلام عليكم ورحمة الله وبركاته رمضان كريم وكل سنه وانت طيبين ازاي نستخدم محرر ckeditor علشان نعمل مربع اكواد...

احصائياتى

الردود
3

المشاهدات
1128
Mohamed yasser
مشرف قسم تطوير المواقع
.:: مطور لغة PHP ::.
  • Mohamed yasser is just really niceMohamed yasser is just really niceMohamed yasser is just really niceMohamed yasser is just really nice

  • Mohamed yasser غير متواجد حالياً

المشاركات
589

+التقييم
76

تاريخ التسجيل
Mar 2019

الاقامة
ام الدنيا مصر

نظام التشغيل
Other

رقم العضوية
1982
05-19-2019, 05:31 PM
المشاركة 1
05-19-2019, 05:31 PM
المشاركة 1
افتراضي انشاء مربع الاكواد لمحرر ckeditor

السلام عليكم ورحمة الله وبركاته
رمضان كريم وكل سنه وانت طيبين
ازاي نستخدم محرر ckeditor علشان نعمل مربع اكواد بالشكل ده

اول حاجه لازم تجيب اضافه
codesnippet
prism
من الاضافات وغالبا بتكون موجوده في المحرر الجديد لو مش موجوده حمله من الموقع ذي ماشرحت في الموضوع السابق
نيجي للعمل
اتحط الاضافات بعد ماتنزلهم لو مش عندك مع اتباع خطوات درس اضافات المحرر
شغل الصفحه
في الاستايل حط دول
كود PHP:
code[class*="language-"],pre{
    
color:white;
    
text-shadow:-.1em .2em black;
    
font-family:Monaco,Consolas,'Andale Mono','Ubuntu Mono',monospace;
    
direction:ltr;
    
text-align:left;
    
white-space:pre;
    
word-spacing:normal;
    
word-break:normal;
    
word-wrap:normal;
    
line-height:1.5;
    -
moz-tab-size:4;
    -
o-tab-size:4;
    
tab-size:4;
    -
webkit-hyphens:none;
    -
moz-hyphens:none;
    -
ms-hyphens:none;
    
hyphens:none
}
@
media print{
    
code[class*="language-"],pre{
        
text-shadow:none
    
}
}
pre,:not(pre)>code[class*="language-"]{
    
background:hsl(30,20%,25%)
}
pre{
    
padding:1em;
    
margin:.5em 0;
    
overflow:auto;
    
border:.3em solid hsl(30,20%,40%);
    
border-radius:.5em;
    
box-shadow:1px 1px .5em black inset
}
:
not(pre)>code[class*="language-"]{
    
padding:.15em .2em .05em;
    
border-radius:.3em;
    
border:.13em solid hsl(30,20%,40%);
    
box-shadow:1px 1px .3em -.1em black inset;
    
white-space:normal
}
.
token.comment,.token.prolog,.token.doctype,.token.cdata{
    
color:hsl(30,20%,50%)
}
.
token.punctuation{
    
opacity:.7
}
.namespace{
    
opacity:.7
}
.
token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{
    
color:hsl(350,40%,70%)
}
.
token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{
    
color:hsl(75,70%,60%)
}
.
token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{
    
color:hsl(40,90%,60%)
}
.
token.atrule,.token.attr-value,.token.keyword{
    
color:hsl(350,40%,70%)
}
.
token.regex,.token.important{
    
color:#e90
}
.
token.important,.token.bold{
    
font-weight:bold
}
.
token.italic{
    
font-style:italic
}
.
token.entity{
    
cursor:help
}
.
token.deleted{
    
color:red
}
pre{
    
position:relative;
    
padding-left:3.8em;
    
counter-reset:linenumber
}
pre>code{
    
position:relative
}
pre>code .line-numbers-rows{
    
position:absolute;
    
pointer-events:none;
    
top:0;
    
font-size:100%;
    
left:-3.8em;
    
width:3em;
    
letter-spacing:-1px;
    
border-right:1px solid #999;
    
-webkit-user-select:none;
    -
moz-user-select:none;
    -
ms-user-select:none;
    
user-select:none
}
.
line-numbers-rows>span{
    
pointer-events:none;
    
display:block;
    
counter-increment:linenumber
}
.
line-numbers-rows>span:before{
    
content:counter(linenumber);
    
color:#999;
    
display:block;
    
padding-right:.8em;
    
text-align:right
}
.
box-code{
max-height498px;
outlinenone !important;
overflowauto;
text-alignleft;
width650px

بعد كده حط دول في header
كود PHP:
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>

    <script src="ckeditor/plugins/prism/lib/prism/prism_patched.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script> 
طيب انا عايز ااول ما اعمل الاكواد ده يجي في مربع
بسيطه
اتروح علي المسار ده
ckeditor < plugins <codesnippet

اتفتح ملف plugin.js
اتبحث عن السطر ده
كود PHP:
template'<pre><code class="' codeClass '"></code></pre>'
بدله بده
كود PHP:
template'<pre class="box-code"><code class="' codeClass '"></code></pre>'
الحكايه انك حطيت كلاس box-code
انا انا عامله علشان لو الكود كبير ميكبرش الصفحه ويخليه مليانه
كده احنا خلصنا
بالنسبة لاضافه الاكواد بتتعمل من الاضافه ده

اول ما تفتح ايجيلك مربع كبير
الاول اختار نوع الكود علشان الالوان تظهر علي اساسيات الكود

وكده اكون خلصت ورمضان كريم


قديم 05-20-2019, 08:23 PM
المشاركة 2
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: انشاء مربع الاكواد لمحرر ckeditor
مبدع صدقنا حمزة

قديم 05-20-2019, 09:07 PM
المشاركة 3
Mohamed yasser
مشرف قسم تطوير المواقع
.:: مطور لغة PHP ::.
  • Mohamed yasser غير متواجد حالياً
افتراضي رد: انشاء مربع الاكواد لمحرر ckeditor
اسمي محمد ياسر لكن لقبي حازم مو حمزه😅

قديم 05-20-2019, 10:00 PM
المشاركة 4
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: انشاء مربع الاكواد لمحرر ckeditor
عاشت الاسامى ياباااااااااشا

اضافة رد

العلامات المرجعية

انشاء مربع الاكواد لمحرر ckeditor


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: انشاء مربع الاكواد لمحرر ckeditor
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
انشاء مكتبة لتخزين الاكواد في محرر htmlpad Mohamed yasser ركن تطوير المواقع 2 08-19-2019 08:09 PM
اضافات محرر النصوص ckeditor Mohamed yasser ركن تطوير المواقع 6 05-24-2019 06:28 AM
تغير لون CKEditor Mohamed yasser ركن تطوير المواقع 3 05-18-2019 02:12 AM
اضافة بطاقة فلاش لمحرر النصوص بالمنتدى بـ bbcode هيلبرنت ركن تطوير منتديات vb3.8.0 0 05-04-2018 09:54 AM
[XF 1.x Add] : طريقة اضافة خط جديد لمحرر النصوص المتطور, KL_FontsManager-2.0.6 abo-karim اضافات الزين فورو XENFORO 10 11-18-2017 05:55 PM




الساعة الآن 04:39 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum