يعلمك هذه المقالة كيفية استخدام محرر النصوص في Bootstrap-WysiWyg لإعطاء اللعب الكامل لمزايا المحرر. آمل أن تتمكن من اكتساب شيء ما.
الميزات الرئيسية:
سوبر صغير 5 كيلو بايت
دعم مفتاح Hotkey التلقائي (Mac و Windows)
اسحب وإدراج الصور ، ودعم تحميل الصور (يدعم التصوير الفوتوغرافي للهاتف المحمول)
دعم مدخلات الصوت (دعم الكروم)
السماح لأشرطة أدوات مخصصة باستخدام جميع محتوى bootstrap ، الخطوط
لا يتم استخدام أنماط إلزامية
.......................................................................................................................................................
في الواقع ، إنه أكثر من ذلك ، يحتاج الجميع إلى استكشافه بأنفسهم ، تعال!
إنه في الواقع بسيط للغاية للاستخدام. صب JS من CSS ذات الصلة bootstrap ، JS ، jQuery ، و bootstrap-wysiwyg ، على النحو التالي:
<link href = "bootstrap-combined.no-icons.min.css" rel = "stylesheet"> <link href = "bootstrap-donsponsive.min.css" rel = "stylesheet"> <link href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "STYLESHEET"> <link rel = "stylesheet" href = "index.css" type = "text/css" type = "text/javaScript"> </script> <script src = "boutstrap.min.js"> </script> <script src = "bootstrap-wysiwyg.js" type = "text/javaScript"> </script> <lript src = extrip
تحديد خصائص وطرق عنصر القائمة ذات الصلة:
وظيفة initToolBarBootSstrapBindings () {var fonts = ['serif' ، 'sans' ، 'arial' ، 'arial Black' ، 'Courier' ، 'Courier new' ، 'comic sans ms' ، 'times' ، 'times' ، erman '،' erman '، erman' ، erman '، erman' ، erfan eries '، erferana' ، erferana '، erman' ، erferana '، erfera'. fonttarget = $ ('[title = font]'). الأشقاء ('. $. EACH (fonts ، function (idx ، fontname) {fonttarget.append ($ ('<li> <a data-edit = "fontname' + fontname + '" style = "font-family:/' ' + fontname +'/'"> + fontname +' </a> </li> ') ؛}) ؛ $ ('a [title]'). Tooltip ({Container: 'Body'}) ؛ $ ('. $ ('[Data-Role = Magic-Overlay]'). كل (function () {var overlay = $ (this) ، target = $ (overlay.data ('target')) ؛ overlay.css ('opitated' ، 0) .css ('position' ، 'appolute'). }) ؛ if ("OnWebKitspeechChange" في المستند. $ ('#voiceBtn'). css ('position' ، 'apport'). Offset ({top: editoroffset.top ، left: editoroffset.left+$ ('#editor'). innerwidth ()-35}) ؛ } else {$ ('#voicebtn'). Hide () ؛ }} ؛ وظيفة دش دش (سبب ، التفاصيل) {var msg = '' ؛ if (Quenty === 'type-file-type') {msg = "format unsupported" +التفاصيل ؛ } else {console.log ("خطأ في تحميل الملف" ، العقل ، التفاصيل) ؛ } $ ('<div> <button type = "button" data-dismiss = "Alert"> × </button>'+'<strong> خطأ في تحميل الملف </strong>'+msg+'</viv>'). prependto ('#Alerts') ؛ } ؛ initToolBarBootStrapBindings () ؛ $ ('#editor'). wysiwyg ({fileuploaderror: damerororalert}) ؛أخيرًا ، رمز HTML:
<div data-drole = "editor-toolbar" data-arget = "#editor"> <viv> <a data-toggle = "sropdown"> <i> </i> <b> </b> </a> <ul> </ul> </liv> <div> <a data-toggle = "dropdown"> </i> data-edit = "fontsize 5"> <font size = "5"> ضخمة </font> </a> </li> <li> <a data-edit = "fontsize 3"> <font size = "3"> normal </afont> </a> </li> <li> <li> <a data-edit = "fontsize 1"> <font size = "1"> صغير </font> </a> </li> </ul> </viv> <viv> <a data-edit = "bold"> <i> </i> </a> <a data-edit = "etalic"> <i> </a> data-edit = "strikethrough"> <i> </i> </a> <a data-edit = "enderline"> <i> </i> </a> </viv> <viv> <a data-edit = "insertunorderedlist"> <i> </i> </a> <a data-edit = "Offent" data-edit = "outtent"> <i> </i> </a> <a data-edit = "outtent"> <i> </i> </a> <a data-edit = "outtent"> <i> </i> </a> <a data-edit = "adent"> <i> </a> </a> data-edit = "justifyleft"> <i> </i> </a> <a data-edit = "justifyCenter"> <i> </i> </a> <a data-edit = "justifyRight"> <i> </i> </a> <a data-edit = "justifyfull"> <i> </a> data-toggle = "sropdown"> <i> </i> </a> <viv> <input placeholder = "url" type = "text" data-edit = "createlink"/> <button type = "button"> إضافة </button> </div> <a data-edit = "unlin id = "picturebtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-target = "#picturebtn" data-edit = "insertimage"/> </div> <div> <a data-edit = "undo" <type type = "text" data-edit = "inserttext" id = "voiceBtn"
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.