كيفية إضافة محرر نصوص لموقعك

Chokri.Z · ‏1/9/2022

مـــقـــدمـــة
وفقا لتطور ميدان التطوير و البرمجة عامة و تطوير و برمجة المنتديات خاصة، أصبح اليوم من شبه الضروري إدماج محرر نصوص لمنتداك.
الحمد لله متوفر العديد منها و مجانا باستثناء بعض الخصائص المدفوعة و هي لا تنقص من قيمة المحرر المجاني الشئ الكثير.

الـــفـــكـــرة
سنستعمل في توضيحنا هذا محرر مشهور جدا على جميع الأصعدة "CKEditor"
بالتحديد سنأخذ النسخة الرابعة مع آخر إصدار فيها طبعا "CKEditor 4".

سنقوم إن شاء الله بتفعيل كل الخصائص المتاحة في النسخة، و تغيير الإعدادات الإفتراضية على حسب حاجتنا.
بحيث في الأخير، سنحصل على محرر كامل تقريبا و ذو جمالية محترمة. سأوفر عليكم عبأ التحميل ، و سأدرج كامل المشروع بالمرفقات إن شاء الله .
لن أقوم بشرح التفاصيل هنا. كل شئ مفصل داخل الملفات. و هذا لن يمنع السؤال و الإستفسار طبعا .

نبدأ على بركة الله

الملف الرئيسي
كود HTML:
<!DOCTYPE html>
<html lang="ar" dir="rtl">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
       
        <title>CKEditor 4 نموذج</title>
       
        <link  href="./css/font-face.css" rel="stylesheet">
        <link href="./css/full-inline.css" rel="stylesheet">
     
    </head>
   
    <body>
   
        <main>
            <h1 dir="ltr">CKEditor 4 (inligne)</h1>
            <div class="editor-contenair">
                <div class="inline-editor-content">
                    
                    <div id="editor"></div>
                    
                </div>
            </div>
        </main>
       
        <script src="./ckeditor/ckeditor.js"></script>
        
        <script src="./ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
        <script src="./js/full-inline.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                // إستدعاء دالة التهيئة
                initEditor('#editor');
               
                // إبراز الكود
                // Enabling Syntax Highlighting (Code Snippets)
                document.querySelectorAll('pre code').forEach((el) => {
                    hljs.highlightElement(el);
                });
                // أو استعمل هذا السطر
                // hljs.initHighlightingOnLoad();
            });
        </script>
    </body>
</html>
ملف النمط "CSS"

كود PHP:

@charset "UTF-8"; *, ::before, ::after{     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } html, body{     margin: 0;     padding: 0;     font: 16px / 1.8 'Helvetica Neue', Arial, Helvetica, sans-serif;     font-weight: 300;     font-style: normal;     color: #575757; } p { margin: 0; } main{     width: 100%;     margin: 3px auto; } main h1{     font-family: 'HelveticaNeueCyr';     font-weight: 500;     font-style: italic;     color: #9AB8F3; /* #F7B42C, #AADC6E, #66AB16 */     text-align: center; } .editor-contenair {     width: 90%;     margin: 3px auto; } .editor-contenair:after .editor-contenair:before{     width: 0;     height: 0;     display: block;     content: '';     overflow: hidden;     visibility: hidden;     font-size: 0;     line-height: 0;     clear: both; } /*لتوافق المحرر مع جميع الشاشات*/ .inline-editor-content {     width: 100%;     margin-left: auto;     margin-right: auto;     direction: rtl; }

ملف التهيئة (جافا سكريبت)

كود PHP:

'use strict'; // فحص البيئة if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )     CKEDITOR.tools.enableHtml5Elements( document ); // إبقاء المحرر في العينة صغيرًا بدرجة كافية ما لم يحدد المستخدم ارتفاعه CKEDITOR.config.height = 150; // ترك خيار الطول حر أي ديناميكي CKEDITOR.config.width = 'auto'; // دالة التهيئة var initEditor = ( (el) => {         var wysiwygareaAvailable = isWysiwygareaAvailable();     return function() {         // حاوية المحرر         let containerEditor = document.querySelector( el );         // تعيين الحاوية للمحرر و تعريف المحرر الحالي         var editorElement = CKEDITOR.containerEditor,             currentEditor;         // (classic or inline editor) wysiwygarea إنشاء محرر إعتمادا على البرنامج المساعد         if ( wysiwygareaAvailable ) {                         // جعل محتوى حاوية المحرر قابل للتعديل             currentEditor = CKEDITOR.replace( 'editor' );                         /**إنشاء و عرض إشعار بنجاح عملية الإنشاء ة التحميل              * تتوفر أربعة أنواع من الإشعارات              * info              * warning              * success              * progress              *              * مدة العرض الإفتراضية 5 ثوان             */             currentEditor.once( 'instanceReady', function() {                 // إنشاء و عرض إشعار بنجاح عملية الإنشاء ة التحميل                 var notification = new CKEDITOR.plugins.notification( currentEditor, {                     message: 'Ready For Use',                     type: 'success'                 });                                 notification.show();             });         } else {                         editorElement.setAttribute( 'contenteditable', 'true' );                         currentEditor = CKEDITOR.inline( 'editor' );                         currentEditor.once( 'instanceReady', function() {                 var notification = new CKEDITOR.plugins.notification( currentEditor, {                     message: 'Ready For Use',                     type: 'success'                 });                                 notification.show();             });                         /** TODO */             // يمكن رفع بعض الإشعارات في صورة عدم إشتغال البرنامج المساعد                     }     };     function isWysiwygareaAvailable() {         // (wysiwygarea) إن كنا في وضع التطوير يجب أن يكون البرنامج المساعد مناح         if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {             return true;         }         return !!CKEDITOR.plugins.get( 'wysiwygarea' );     } })();

ملف الإعدادات (جافا سكريبت)

كود PHP:

'use strict'; /** تغيير الإعدادات الإفتراضية بأخرى مخصصة */ CKEDITOR.editorConfig = function( config ) {         /**موقع شريط الأدوات      *الموقع الإفتراضي هو في الأعلى      *('top, bottom') القيم الممكنة      */     // config.toolbarLocation = 'bottom';         // config.extraPlugins = 'notification';         //(plugins) تنشيط المكونات الإضافية المطلوبة     config.extraPlugins = 'language, codesnippet';         // تغيير إعداد اللغة الإفتراضي     config.language = 'ar';     // alert( config.language); // 'ar'         // إذا كانت هذه الميزة معطلة ، لن يكون مقبض تغيير الحجم مرئيًا     config.resize_enabled = false; // true|false     /** طريقة التحكم في الخيار عند التفعيل      *  config.resize_dir = 'both';      *  (both, vertical, horizontal) القيمة الممكنة في صورة تفعيل الخيار      */         config.skin = 'moonocolor';     // config.skin = 'icy_orange';     // config.skin = 'moono-lisa';     // config.skin = 'prestige';  // config.uiColor= '....'; عتد الإستعمال يجب تغيير الوت إلى المناسب         //(User Interface Color) ضبط لون واجهة المستخدم للمحرر     config.uiColor = "#9AB8F3"; /* #F7B42C, #AADC6E, #66AB16 */         //(Editor Height) تحديد إرتفاع المحرر     config.height = 300;     // بعد التعديل على الطول و الإرتفاع     config.toolbarCanCollapse = true;         // هذا السطر سيظهر تلقائيا داخل المحرر للمساعدة     config.editorplaceholder = 'إبدأ بكتابة محتوى';     config.editorplaceholder_delay = 150;         /**(pre and code) HTML تعيين نمط لعتاصر الـ      * مسار الأنماط      * ckeditor/plugins/codesnippet/lib/highlight/styles      */     config.codeSnippet_theme = 'monokai';         // تقليص الخيارات للكود حسب الحاجة     config.codeSnippet_languages = {         html: 'HTML',         javascript: 'JavaScript',         php: 'PHP',         sql: 'SQL',     };         // إلغاء بعض الخضائص     config.removePlugins = 'exportpdf, PasteFromWord, about'; };

معاينة

مــتــابــعــة طــيــبــة

تسجيل الدخول

كيفية إضافة محرر نصوص لموقعك

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

ckedit4.rar

كيفية إضافة زر "copy to clipboard" لعنصر HTML

كيفية إضافة مؤثرات لعنصر (2)

كيفية إضافة مؤثرات لعنصر HTML بـــ CSS

كيفية التعامل مع split و join في الجفا سكريبت

كيفية منع إرسال البيان من أي نموذج (Form)

تسجيل الدخول

كيفية إضافة محرر نصوص لموقعك

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

ckedit4.rar

كيفية إضافة زر "copy to clipboard" لعنصر HTML

كيفية إضافة مؤثرات لعنصر (2)

كيفية إضافة مؤثرات لعنصر HTML بـــ CSS

كيفية التعامل مع split و join في الجفا سكريبت

كيفية منع إرسال البيان من أي نموذج (Form)

عمليات بحث مفيدة