دعنا نلقي نظرة على الوصف الرسمي للوظائف ذات الصلة لهذا المحرر.
1. يمكن أن يربط تلقائيًا مفاتيح Hotkeys القياسية للعمليات المشتركة على منصات Mac و WNDOWs.
2. يمكنك إدراج الصور عن طريق السحب والإسقاط ؛ دعم تحميل الصور (يمكنك أيضًا الحصول على صور على جهازك المحمول)
3. إدخال التعرف على الصوت (متصفح الكروم فقط)
4. السماح لأشرطة الأدوات المخصصة ؛ لا يتم إنشاء علامات إضافية ؛ دعم الموقع الإلكتروني للاستفادة الكاملة من الميزات الممتازة لمكتبات الأدوات مثل bootstrap ، خط رائع ، إلخ.
5. كل شيء متروك لك إذا لم يكن هناك أسلوب إلزامي
6. الاعتماد على الميزات القياسية للمتصفح ، لا رمز غير قياسي ؛ يمكن تخصيص وظائف شريط الأدوات ولوحة المفاتيح ، ويمكنها تنفيذ أي أوامر تدعمها المتصفح.
7. لن يقوم هذا المحرر بإنشاء إطار منفصل ، ومنطقة نصية للنسخ الاحتياطي ، وما إلى ذلك ، تحاول الحفاظ عليها بسيطة قدر الإمكان وتشغيلها في DIV.
8. (اختياري) مسح مساحة الذيل ؛ مسح الفارغ الفارغ والانزيف
9. يجب تشغيل المتصفحات الحديثة (تم اختبارها على Chrome 26 ، Firefox 19 ، Safari 6 ، ويبلغ المستخدمون أنه يمكنهم العمل على IE10)
10. دعم متصفح الهاتف المحمول (تم اختباره على iOS 6 iPad/iPhone و Android 4.1.1 Chrome)
ملاحظة: Wysiwyg و Wysihtml5 هما محررين مختلفين. Wysiwyg هو نسخة محسّنة من Wysihtml5 ، وهو متشابه نسبيًا. حتى تتمكن من استخدامه وفقًا لاحتياجاتك.
موقع Wysiwyg الرسمي: http://mindmup.github.io/bootstrap-wysiwyg/
موقع Wysiwyg الصيني: http://www.bootcss.com/p/bootstrap-wysiwyg//
موقع Wysihtml5 الرسمي: http://jhollingworth.github.io/bootstrap-wysihtml5/
نظرًا لأن Wysiwyg عبارة عن نسخة محسّنة من Wysihtml5 ، اسمحوا لي أن أتحدث عن استخدام Wysiwyg ، Wysihtml5 متشابهة.
خطوات للاستخدام
1. تقديم ملفات JS و CSS التالية. أود هنا أن أذكر أن الموقع الرسمي هو مجرد استخدام عام ، ويجب تقديم المستندات التالية قبل أن تتمكن من سني حيز التنفيذ ، لذلك يركز هذا الموقع على التطبيق الفعلي ، ولا يمكن تجاهل هذه التفاصيل.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel = "stylesheet"> <link HREF = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script src = "https://mindmup.s3 src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/bootstrap/Assets/jSETS/Google-Prettify> HREF = "index.css" rel = "STYLESHEET"> <script src = "bootstrap-wysiwyg.js"> </script>
2. إضافة قطعة من رمز JS. بسبب الكثير من التعليمات البرمجية ، لن يتم سرده هنا. قام هذا الموقع بفرز رمز المصدر. يرجى الرجوع إلى رمز المصدر لـ demo.html
.........
3. أضف رمز HTML التنسيق التالي إلى علامة الجسم. تجدر الإشارة هنا إلى أن المحرر غير مغلف ، ولكن يكتب مباشرة الرمز في صفحة HTML. يمكن تقسيم المحرر بأكمله إلى جزأين ، شريط الأدوات العلوي وصندوق تحرير النص.
1) شريط الأدوات العلوي: هو div.btn-toolbar يحتوي على متعددة div.btn-groups. كل زر أداة هو div.btn-group. في كل مجموعة div.btn ، يمكننا تكوين النص السريع بأنفسنا لعرض الصينيين.
<div data-role = "editor-toolbar" target = "#editor"> <viv> </viv> ..........
هناك أيضًا أداة إدخال صوت HTML5 هنا. الرمز كما يلي:
<type type = "text" data-edit = "inserttext" id = "voiceBtn"
2) مربع نص المحتوى: محرر Div#
<div id = "editor"> المحتوى </div>
ما سبق هو مقدمة موجزة عن bootstrap-wysiwyg ، دعونا نرى التأثير
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
في الواقع ، يحتاج WYSIWG فقط إلى تحديد بعض divs لبناء محرر مرئي ، في حين أن جزء التحرير يحتاج فقط إلى DIV مع محرر ID لإكماله. آمل أن تساعد هذه المقدمة الموجزة لمحرر Bootstrap-Wysiwyg المرئي للجميع.