كيف اقدر اعمل محرر نصوص على صفحة ويب كهذا الذي بالصورة المرفقه او كمحرر موقع حسوب هذا، مع المميزات من نسخ ولصق والتحكم بالمؤشر الخ..
كيف ممكن اعمل محرر نصوص على صفحة ويب
في العادة يتم إستعمال إضافات محررات النصوص . نذكر من بين إضافات الـ 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 الخاصين بالحزمة من:
يوجد العديد من محررات النصوص التي يمكن إضافتها لصفحات الويب، وهي مبرمجة مسبقاً تحتاج لتضمينها فقط في موقعك، منها ماهو متوافق مع إطارات العمل Front End مثل vue - react وغيرها..
يمكنك البحث عن المحررات التالية وتصفح ميزاتهم ثم البحث عن طريقة تضمينهم
- WYSIWYG (يوجد حزمة مجانية فيها العديد من الميزات)
- widgEditor
- TinyMCE
- MarkItUp
- NicEdit
- YUI 2: Rich Text Editor
لإضافة ميزات مثل محرر نصوص حسوب، على الأغلب هو برمجة خاصة وليس مجاني
انا متمكن من لغة جافا سكربت احب لو اعمل ذلك بنفسي، ولكن انا اعمل بمكتبة جي كويري هل فيها ميزة محرر نصوص
الاخ عدنا مسكرا ارسلي روابط هذه الاضافات على الجي ثب وانا ليس لدي كمبوسر على هاتفي للتحميل ولا امتلك كمبيوتر، كيف اقدر احملها من الجي ثب
الاخ عدنا مسكرا ارسلي روابط هذه الاضافات على الجي ثب وانا ليس لدي كمبوسر على هاتفي للتحميل ولا امتلك كمبيوتر، كيف اقدر احملها من الجي ثب
انا مصمم ومبرمج ويب مبتدي احب اتعلم كل شي عن الويب من برمجه او تصميم، وسؤالي كان عن كيف اعمل مربع كتابة النص يشبه هذا الي في موقع حسوب الذي نكتب بداخله الردود، حيث يوجد برمجيات حلوه مثل جعل النص عريض او او عمل اقتباص كل هذا نقدر نعمله ونحن في حالة تحرير النص هذا ما اردت معرفته
التعليقات