تتيح لك هذه الحزمة إدراج آيات القرآن إلى محرر Summernote بسهولة. يمكنك البحث عن آية مباشرة أو اختيار السورة ثم تحديد الآية. إليك رابط الحزمة.
يمكنك اتباع المثال هنا لدمجها في تطبيقك.
التثبيت والإعداد
1. تهيئة محرر Summernote
ابدأ بتهيئة المحرر بالكود التالي:
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<!-- we used font awesome to display the quran icon, you can use any other icon library and edit it -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<form>
<textarea id="summernote" name="editordata"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
</body>
2. تضمين ملف summernote-quran.js
أضِف سكربت summernote-quran.js إلى مشروعك:
<script src="../summernote-quran.js"></script>
3. تهيئة المحرر وإضافة الإضافة إلى شريط الأدوات
ادمج الإضافة داخل شريط أدوات Summernote بهذه الطريقة:
<script>
$(document).ready(function () {
$('#summernote').summernote({
tabsize: 2,
height: 400,
toolbar: [
['custom', ['quran']],
// other toolbar elements here, for example:
['font', ['bold', 'underline', 'clear']],
],
quran: {
icon: '<i class="fa-solid fa-book-quran"></i>',
tooltip: 'here to add quran'
},
});
});
</script>
4. نسخ بيانات القرآن JSON
تأكّد من نسخ الملف assets/quran.json إلى مساحة عملك. وإن رغبت بتعديل المسار، حدّث الإشارة إليه داخل summernote-quran.js وفقاً لذلك.
الخلاصة
هذا كل شيء! أصبح بإمكانك الآن إدراج الآيات بسرعة وسهولة داخل محرر Summernote. برمجة ممتعة!
