Tinyeditor The Simple HTML Wysiwyg Editor

قبل بضعة أيام ، قدمت لك محرر XHTML المحلي. اليوم أريد أن أوصي بك tinyeditor لك. إنه محرر HTML WYSIWYG بسيط وسهل الاستخدام للتو من قبل Leigeber.com ، مدونة تصميم الويب الأجنبية المعروفة.

• إنه مكتوب في JavaScript ولا يعتمد على المكتبات الأخرى
• هذا محرر خفيف الوزن ، والملفات التي سيتم استدعاؤها هي 8 كيلو بايت فقط
• يمكنه التعامل مع معظم متطلبات تنسيق HTML ، والوظائف المدمجة تجعل العلامات التي تم إنشاؤها بسيطة قدر الإمكان
• يستخدم الرمز الصغير المستخدم في المحرر تقنية CSS Sprite ، مما يقلل من اتصالات HTTP
• اختبار المرور في المتصفحات السائدة
• يمكن استخدامها في المشاريع الشخصية أو التجارية ، بعد رخصة العموم الإبداعية

1. الرجوع إلى ملفات JS و CSS التي توفرها TinyEditor في ملفات صفحة الويب
2. إن إضافة العلامات المطلوبة من قبل المحرر إلى ملف صفحة الويب هو في الواقع نص ، على النحو التالي

    <textarea id = input style = width: 400px ؛ الارتفاع: 200 بكسل> </textarea>

   لاحظ أن الطول والعرض المحددة في Textarea هما حجم المحرر.

3. تهيئة المحرر من خلال البرامج النصية وتكوين المعلمات المختلفة على النحو التالي:

    new Tiny.Editor.Edit ('Editor' ، {id: 'input' ، // (must) idwidth: 584 من textarea المحددة في الخطوة الثانية أعلاه ، // (اختياري) ارتفاع عرض المحرر: 175 ، // (اختياري) ارتفاع CSSCLASS: 'TE' ، ClassRowClass: "TeHeader" ، // (اختياري) محرر خط المحرر ClassDividerClass: "Tedivider" ، // (اختياري) عناصر التحكم في نمط زر المحرر: ["Bold" ، "Italic" ، "Orderline" ، "underder" ، "strikethrough" ، "، "المسافة البادئة" ، "|" ، "Leftalign" ، "مركزية" ، "يمين" ، "blockjustify" ، "|" ، "unfortfort" ، "،" ، "،" ، "،" ، "،" ، "،" ، " // (مطلوب) إضافة عناصر التحكم في الزر إلى المحرر حسب الحاجة ، حيث "| XHTML: TRUE ، // (اختياري) يقوم المحرر بإنشاء XHTML أو HTML TAG CSSFILE: 'style.css' ، // (اختياري) ملف css الخارجي ليتم إرفاقه بمحتوى المحرر: "بدء المحتوى" ، // (اختياري) تعيين المحتوى الأولي في منطقة تحرير المحرر: تحرير المنطقة الخلفية bodyid: 'editor' ، // (اختياري) قم بتعيين منطقة التحرير IdFooterClass: 'tefooter' ، // (اختياري) قم بتعيين المحرر السفلي classtoggle: {text: 'source code' ، activetext: 'positionization' ، cssclass: "toggle '} ، // ClassResize: {cssclass: 'تغيير حجم'} // (اختياري) قم بتعيين فئة ضبط حجم المحرر}) ؛

   يمكن القول أنه قابل للتكوين بشكل كبير ، وعناصر التكوين واضحة نسبيًا.

في التطبيق الفعلي لـ TinyEditor ، تجدر الإشارة إلى أنه قبل إرسال محتوى المحرر ، يجب استدعاء وظيفة teancy.post () للتأكد من تحويل أحدث المحتوى المرئي في منطقة التحرير إلى نص علامة.

عرض مثال: http://sandbox.leigeber.com/tinyeeditor/