Bootstrap предоставляет богатый текстовый компонент, называемый Wysiwyg, который используется для отображения и редактирования богатых текстовых данных, но неизвестно, как сохранить отредактированные данные в базу данных MySQL. Кроме того, неизвестно, как отобразить данные в базе данных MySQL для Wysiwyg. Для этих двух проблем позвольте мне рассказать вам решение!
1. Эффект дисплея
Во -первых, давайте посмотрим, как это работает:
В богатом тексте есть изображение и список номеров
Мы видим, что отредактированные данные успешно сохраняются и соответствующий дисплей после сохранения.
2. Богатый текст
Объяснение Du Niang о богатых текстах выглядит следующим образом:
Богатый текстовый формат (обычно называемый RTF) представляет собой кроссплатформенный формат документа, разработанный Microsoft. Большинство программного обеспечения для обработки текстов может читать и сохранять документы RTF. RTF-это аббревиатура богатой текстовой формы, что означает многократный формат. Это файл, аналогичный формату DOC (документ Word) с хорошей совместимостью. Вы можете открыть и отредактировать его, используя «Word Pad» в Windows «аксессуары». RTF является очень популярной структурой файлов, и многие текстовые редакторы поддерживают ее. Общие настройки формата, такие как настройки шрифта и абзаца, настройки страницы и т. Д., Все могут существовать в формате RTF, что может в определенной степени реализовать взаимный доступ между файлами Word и WPS.
Если богатый текст не содержит изображений, мы можем использовать обычный метод транскодирования HTML, см. Название 4; Если богатый текст содержит картинки, обычное транскодирование HTML больше не может удовлетворить нас, поэтому нам нужно использовать jQuery.base64.js, см. Заглавное название 3.
Затем в то же время давайте посмотрим на определение поля MySQL:
`description` Longtext, а не нулевой комментарий, подробное описание проекта ',
Тип поля-Longtext (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 form загруженная с помощью файла * * @param {object} * form * @param {object} * callback */function iframecallback (form, callback) {yunm.debug ("обработка загрузки с файлом"); var $ form = $ (form), $ iframe = $ ("#callbackframe"); // Rich Text Editor $ ("div.editor", $ form) .ireck (function () {var $ this = $ (this); var editor = "<input type = 'hidden' name = '" + $ this.attr ("name") + "' value = '" + $ .base64.btoa ($ this.html () + " /' /' /"; 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'> </iframe>") .appendto ("body"); } if (! form.ajax) {$ form.append ('<input type = "hidden" name = "ajax" value = "1" />'); } form.Target = "CallbackFrame"; _iframeresponse ($ iframe [0], callback || yunm.ajaxdone);} function _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';" ||/////iframe. "Javascript: '<html> </html>';") {// для FF, то есть return; DOCE. BODY.INNERHTML == "FALSE") Ответ; // Ответ html или простой текстовый ответ = doc.body.innerhtml;③ Отображение богатых текстовых данных
$ ('#Editor'). HTML ($. Base64.atob (описание, true));
Декодировать код 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;} функция 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 Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего об этой статье. Я надеюсь, что для всех будет полезно понять богатый текстовый компонент Wysiwyg.