كيف اقدر اعمل محرر نصوص على صفحة ويب كهذا الذي بالصورة المرفقه او كمحرر موقع حسوب هذا، مع المميزات من نسخ ولصق والتحكم بالمؤشر الخ..
كيف ممكن اعمل محرر نصوص على صفحة ويب
في العادة يتم إستعمال إضافات محررات النصوص . نذكر من بين إضافات الـ jQuery مثلا:
- محرر LineControl
- محرر RichText
- محرر MultiformTextEditor
يتم تثبيت هاته المحررات عن طريق تضمين ملفها المصدري في الصفحة، ثم عن طريق إعطاء الحقل النصي المستهدف الذي تحاول تحويله إلى محرر نصوص، ثم بتهيئة بسيطة يتم تطبيقها.
يمكن أيضا العمل على محرر نصوص مخصص بنفسك، ولكن ستكون العملية مجهدة وطويلة، بدلا من ذلك يمكنك إستعمال هاته الإضافات الجاهزة ، عن نفسي أحب إستعمال إضافة LineControl رغم أن RichText أفضل وأكثر شيوعا.
يتم ذلك بتضمين بسيط للملفات المصدرية في الصفحة، ثم تحديد الحقل النصي الذي تحاول تحويله إلى محرر نصوص.
مثال:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>RichText محرر نصوص</title> <!-- تضمين ملف تنسيقات بوتستراب --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- richText تضمين ملف تنسيقات حزمة --> <link rel="stylesheet" href="richtext.min.css"> <!-- تضمين جيكويري --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- تضمين ملف جافاسكربت الخاص بالحزمة --> <script type="text/javascript" src="jquery.richtext.js"></script> </head> <body> <div class="page-wrapper box-content"> <!-- تعريف حقل نصي --> <textarea class="content" name="example"></textarea> </div> <script> $(document).ready(function() { /* تهيئة الحزمة على الحقل النصي */ $('.content').richText(); }); </script> </body> </html>
الناتج:
شكرا اخي هذا شرح وافي، فقط كيف احمل الحزمه او هذه الاضافه من جي ثب خاصه اني لا املك كمبيوتر والكمبوسر عندي لا يحمل مكتبات من خلال تيرموكس
يمكنك تحميل مرفقات حزمة RichText من الغيت هب عن طريق تحميل ملفي الجافاسكربت والـ css الخاصين بالحزمة من:
التعليقات