يوفر Bootstrap مكونًا نصيًا غنيًا يسمى WysiWyg ، والذي يتم استخدامه لعرض البيانات النصية الغنية وتحريرها ، ولكن من غير المعروف كيفية حفظ البيانات المعدلة في قاعدة بيانات MySQL. بالإضافة إلى ذلك ، من غير المعروف كيفية عرض البيانات في قاعدة بيانات MySQL إلى WysiWyg. لهاتين المشكلتين ، دعني أخبركم الحل!
1. عرض التأثير
أولاً ، دعونا نلقي نظرة على كيفية عمله:
هناك صورة في النص الغني وقائمة الأرقام
يمكننا أن نرى أنه يتم حفظ البيانات المعدلة بنجاح والشاشة المقابلة بعد حفظها.
2. النص الغني
شرح دو نيانغ للنصوص الغنية هو كما يلي:
تنسيق النص الغني (يشار إليه عمومًا باسم RTF) هو تنسيق مستند منصة تم تطويره بواسطة Microsoft. يمكن لمعظم برامج معالجة النصوص قراءة وحفظ مستندات RTF. RTF هو اختصار TextFormat الغني ، مما يعني تنسيق النص متعدد النشر. هذا ملف مشابه لتنسيق DOC (مستند Word) مع توافق جيد. يمكنك فتحه وتحريره باستخدام "Word Pad" في Windows "الملحقات". RTF هي بنية ملفات شائعة جدًا ، والعديد من محرري النصوص يدعمونه. يمكن أن توجد إعدادات التنسيق العام ، مثل إعدادات الخط والفقرة ، وإعدادات الصفحة ، وما إلى ذلك ، بتنسيق RTF ، والتي يمكن أن تحقق الوصول المتبادل بين ملفات Word و WPS إلى حد ما.
إذا كان النص الغني لا يحتوي على صور ، فيمكننا استخدام طريقة ترميز HTML العادية ، انظر العنوان 4 ؛ إذا كان النص الغني يحتوي على صور ، فإن ترميز HTML العادي لم يعد قادرًا على إرضاءنا ، لذلك نحتاج إلى استخدام jQuery.base64.js ، انظر العنوان 3.
ثم في الوقت نفسه ، دعونا نلقي نظرة على تعريف حقل MySQL:
`الوصف` النص الطويل ليس التعليق فارغ "وصف مفصل" ،
نوع الحقل هو نص طويل (يتمتع LongText بحد أقصى يبلغ 4294967295 حرفًا (2^32-1) ، على الرغم من أنني لا أعرف حجمها).
3. jQuery.Base64
①. تقديم jQuery.base64.js
<script type = "text/javaScript" src = "$ {ctx} /components/jquery/jquery.base64.js"> </script>
في الوقت نفسه ، قم بتشفير UTF-8 لضمان عدم تشويه الصينيين.
$ .base64.Utf8encode = true ؛
② ، أرسل نموذج نص غني
var editor = "<input type = 'hidden' name = '" + $ this.attr ("name") + "' value = '"
+ $ .base64.btoa ($ this.html ()) + "' />" ؛
رمز المفتاح: قم بتحويل قيمة HTML لكائن النص الغني إلى BASE64 ثم تغليفه في النموذج.
راجع ما يلي للحصول على التفاصيل (نموذج كامل تم إرسال نموذج ، راجع إطار DWZ):
/** * نموذج ajax تم تحميله مع ملف * * param {object} * form * param {object} * callback */function iframecallback (form ، callback) {yunm.debug ("تحميل معالجة مع ملف") ؛ var $ form = $ (form) ، $ iframe = $ ("#callbackframe") ؛ // محرر النص الغني $ ("div.editor" ، $ form) .each (function () {var $ this = $ (this) ؛ var editor = "<input type = 'hidden' name = '" + $ this.attr ("name") + "' value = '" + $ .base64 var data = $ form.data ('bootstrapvalidator') ؛ if (data) {if (! data.isvalid ()) {return false ؛ }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'about: blank' style = 'display: none'> </frame>) .appendto (" body ") ؛ } if (! form.ajax) {$ form.append ('<input type = "hidden" name = "ajax" value = "1" />') ؛ } form.target = "callbackframe" ؛ _iframeresponse ($ iframe [0] ، callback || yunm.ajaxdone) ؛} الدالة _iframeresponse (iframe ، callback) {var $ iframe = $ (iframe) ، $ document = $ (document) ؛ $ document.trigger ("ajaxstart") ؛ $ iframe.bind ("load" ، function (event) {$ iframe.unbind ("load") ؛ $ document.trigger ("ajaxstop") ؛ if (iframe.src == "JavaScript: '٪ 3chtml ٪ 3e ٪ 3C/html ٪ 3e' ؛ "JavaScript: '<html> </html> ؛") doc.innerhtml == " الاستجابة هي مستند HTML أو استجابة النص العادي = Doc.innerhtml ؛③ ، عرض بيانات النص الغني
$ ('#editor'). html ($. base64.atob (الوصف ، صحيح)) ؛
فك تشفير رمز HTML المحفوظ في قاعدة البيانات من خلال BASE64.
④ ، مكون wysiwyg
فيما يتعلق برمز تغليف مكون WYSIWYG ، قمت بتحميله على قاعدة رمز CSDN ، والتي يمكن الرجوع إليها بالتفصيل.
4. طريقة ترميز HTML العادية
دالة html_encode (str) {var s = "" ؛ if (str.length == 0) return "" ؛ s = str.replace (/&/g ، ">") ؛ s = s.replace (/</g ، "<") ؛ s = s.replace (// g ، ">") ؛ s = s.replace (// g ، "") ؛ s = s.replace (// n/g ، "<br>") ؛ return s ؛} function html_decode (str) {var s = "" ؛ if (str.length == 0) return "" ؛ s = str.replace (// g ، "&") ؛ s = s.replace (/</g ، "<") ؛ s = s.replace (// g ، ">") ؛ s = s.replace (// g ، "") ؛ s = s.replace (/'/g ، "/'") ؛ s = s.replace (// g ، "/" ") ؛ s = s.replace (/<br>/g ،"/n ") ؛ return s ؛}بشكل عام ، يتم استخدام الطريقتين أعلاه لتشفير وفك تشفير بيانات HTML ، ولكن لا يوجد شيء يمكن فعله حيال حفظ الصورة.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال. آمل أن يكون من المفيد للجميع فهم مكون النص الغني Wysiwyg.