Содержание
Загрузка динамического редактора TinyMCE с использованием Ajax, PHP и MySQL.
В предыдущем уроке мы объяснили, как реализовать загрузку изображений в TinyMCE с помощью Ajax и PHP . В этом уроке вы узнаете, как загружать динамические изображения в редакторе TinyMCE с помощью Ajax, PHP и MySQL.
TinyMCE — популярный WYSIWYG-редактор, используемый для ввода данных с целью их сохранения в базе данных. Он применяется в веб-приложениях для добавления и редактирования HTML-контента. Новый контент добавляется с помощью фиксированного редактора, но редактор TinyMCE необходимо динамически загружать и удалять для редактирования контента из разных записей.
Если вы ищете решения для динамической загрузки и удаления редактора TinyMCE для сохранения содержимого, то вы попали по адресу. В этом руководстве вы узнаете, как динамически загружать и удалять редактор TinyMCE для редактирования и сохранения содержимого из разных записей с помощью Ajax, PHP и MySQL.
В этом пошаговом руководстве мы рассмотрим, как динамически загружать и удалять редактор TinyMCE, а также сохранять контент в таблицу базы данных MySQL.
Итак, давайте реализуем динамическую загрузку и удаление редактора TinyMCE и сохранение контента в таблицу базы данных MySQL с помощью Ajax, PHP и MySQL. Основные файлы:
- index.php : PHP-файл для загрузки редактора TinyMCE и записи сообщений.
- tinymce_editor.js : JavaScript-файл для инициализации редактора TinyMCE и обеспечения функциональности сохранения изменений.
- action.php : PHP-файл для обработки AJAX-запросов на редактирование и сохранение записей.
- Message.php : Класс, содержащий методы для получения, сохранения и редактирования записей.
Таблица базы данных
Как показано в этом руководстве, мы будем отображать записи из базы данных и редактировать/сохранять их, загружая динамический редактор TinyMCE. Поэтому сначала мы создадим таблицу в базе данных MySQL, message используя приведенное ниже выражение для создания таблицы, чтобы реализовать эту функциональность.
- MySQL
CREATE TABLE `message` ( `id` int(11) NOT NULL, `message` text NOT NULL, `user` varchar(255) NOT NULL, `created` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; ALTER TABLE `message` ADD PRIMARY KEY (`id`); ALTER TABLE `message` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
Шаг 1: Подключите редактор TinyMCE и jQuery.
Мы загрузим библиотеку редактора TinyMCE, сохраним её в папке tinymceи включим в index.php файл. Также мы подключим jQuery и пользовательский JavaScript- tinymce_editor.js файл.
- tinymce_editor.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="tinymce/tinymce.min.js"></script> <script src="js/tinymce_editor.js"></script>
Шаг 2: Загрузите редактор TinyMCE, чтобы сохранить новое сообщение.
Мы создадим форму с текстовым полем для загрузки редактора TinyMCE, чтобы добавить новое сообщение.
- index.php
<form id="posts" name="posts" method="post"> <textarea name="message" id="message"></textarea><br> <input type="hidden" name="action" id="action" value="save" /> <button type="submit" id="save" name="save" class="btn btn-info saveButton">Сохранить</button> </form>
Шаг 3: Загрузите редактор TinyMCE.
В tinymce_editor.js файле мы создадим функцию startEditor()для инициализации редактора TinyMCE.
- tinymce_editor.js
function startEditor(id) { tinymce.init({ selector: "textarea#"+id, plugins: [ "code ", "paste" ], toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code ", menubar:false, statusbar: false, content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}", height: 200 }); }
Мы вызовем функцию startEditor() и укажем идентификатор текстового поля, чтобы загрузить редактор.
- .js
$( document ).ready(function() { startEditor('message'); });
Шаг 4: Список записей с сообщением
В index.php файле мы выведем список сообщений с кнопками редактирования для изменения текста сообщения.
- index.php
<div id="postLsit"> <?php $result = $message->getPost(); while ($post = $result->fetch_assoc()) { $date = date_create($post['created']); ?> <article class="row" id="postRow_<?php echo $post['id']; ?>"> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="images/user-avatar.png" /> <figcaption class="text-center"><?php echo ucwords($post['user']); ?></figcaption> </figure> </div> <div class="col-md-10 col-sm-10"> <div class="panel panel-default arrow left"> <div class="panel-body"> <header class="text-left"> <div class="comment-user"><i class="fa fa-user"></i> Автор: <?php echo $post['user']; ?></div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> <?php echo date_format($date, 'd MYH:i:s'); ?></time> </header> <div class="comment-post" id="post_message_<?php echo $post['id']; ?>"> <?php echo $post['message']; ?> </div> <textarea name="message" id="<?php echo $post['id']; ?>" style="visibility:hidden;"></textarea><br> <div class="text-right" id="button_section_<?php echo $post['id']; ?>"> <a class="btn btn-default btn-sm" id="edit_<?php echo $post['id']; ?>"><i class="fa fa-reply"></i> Редактировать</a> <a class="btn btn-default btn-sm"><i class="fa fa-reply"></i> Удалить</a> </div> <div id="editSection_<?php echo $post['id']; ?>" class="hidden"> <button type="submit" id="save_<?php echo $post['id']; ?>" name="save" class="btn btn-info saveButton">Сохранить</button> <button type="submit" id="cancel_<?php echo $post['id']; ?>" name="cancel" class="btn btn-info saveButton">Отменить</button> </div> </div> </div> </div> </article> <?php } ?> </div>
Шаг 5: Загрузите динамический редактор TinyMCE для редактирования сообщения.
В tinymce_editor.js файле мы загрузим TinyMCE, вызвав функцию startEditor(messageId) при нажатии кнопки редактирования сообщения. Мы загрузим редактор TinyMCE вместе с сообщением.
- tinymce_editor.js
$('#postLsit').on('click','[id^=edit_]', function(event){ var messageId = $(this).attr('id'); messageId = messageId.replace(/edit_/g, ''); messageId = parseInt(messageId); tinymce.execCommand("mceRemoveEditor", true, messageId); startEditor(messageId); tinymce.get(messageId).setContent($("#post_message_"+messageId).html()); $("#editSection_"+messageId).removeClass('hidden'); $("#button_section_"+messageId).addClass('hidden'); });
Шаг 6: Редактировать сообщение о сохранении
В tinymce_editor.js файле мы реализуем функциональность сохранения сообщения из динамического редактора с помощью Ajax-запроса action.php с действием updateредактирования/сохранения сообщения. Мы также обеспечим отображение обновленного сообщения с подробной информацией.
- tinymce_editor.js
$('#postLsit').on('click','[id^=save_]', function(event){ var messageId = $(this).attr('id'); messageId = messageId.replace(/save_/g, ''); messageId = parseInt(messageId); var postMessage = tinymce.get(messageId).getContent(); tinymce.execCommand("mceRemoveEditor", true, messageId); var action = 'update'; $.ajax({ url:'action.php', method:"POST", data:{id:messageId, message:postMessage, action:action}, dataType:"json", success:function(data){ var html = $("#postHtml").html(); html = html.replace(/USERNAME/g, data.user); html = html.replace(/POSTDATE/g, data.post_date); html = html.replace(/POSTMESSAGE/g, data.message); html = html.replace(/POSTID/g, data.id); $("#postRow_"+messageId).html(html); $("#editSection_"+messageId).addClass('hidden'); $("#button_section_"+messageId).removeClass('hidden'); } }); });
В action.php файле мы проверим наличие действия updateи вызовем update()метод из класса Message.php для обновления записи.
- action.php
if(!empty($_POST['message']) && $_POST['message'] && $_POST['action'] == 'update') { $message->message = $_POST['message']; $message->id = $_POST['id']; $message->update(); }
На занятии Message.php мы реализуем update() метод для обновления сообщения в таблице базы данных и возврата обновленных сведений о записи.
- Message.php
public function update(){ if($this->id && $this->message) { $stmt = $this->conn->prepare(" UPDATE ".$this->messageTable." SET message = ? WHERE id = ?"); $stmt->bind_param("si", $this->message, $this->id); if($stmt->execute()){ $sqlQuery = " SELECT id, message, user, DATE_FORMAT(created,'%d %M %Y %H:%i:%s') AS post_date FROM ".$this->messageTable." WHERE id = '".$this->id."'"; $stmt2 = $this->conn->prepare($sqlQuery); $stmt2->execute(); $result = $stmt2->get_result(); $record = $result->fetch_assoc(); echo json_encode($record); } } }
Шаг 7: Удалите динамический редактор TinyMCE.
В tinymce_editor.js файле мы реализуем функциональность для удаления загруженного редактора TinyMCE при нажатии кнопки «Отмена».
- tinymce_editor.js
$('#postLsit').on('click','[id^=cancel_]', function(event){ var messageId = $(this).attr('id'); messageId = messageId.replace(/cancel_/g, ''); tinymce.execCommand("mceRemoveEditor", true, messageId); $("#editSection_"+messageId).addClass('hidden'); $("#button_section_"+messageId).removeClass('hidden'); });