tmp_teh_zadanie_2_23.07.26_18:04
Различия
Показаны различия между двумя версиями страницы.
| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия | ||
| tmp_teh_zadanie_2_23.07.26_18:04 [2026/07/23 18:26] – [local.php] VladPolskiy | tmp_teh_zadanie_2_23.07.26_18:04 [2026/07/23 18:36] (текущий) – [local.php] VladPolskiy | ||
|---|---|---|---|
| Строка 1426: | Строка 1426: | ||
| </ | </ | ||
| - | ===== local.php ===== | + | ===== toolbar.php ===== |
| - | <code php local.php> | + | <file html toolbar.php> |
| + | <?php | ||
| + | /** | ||
| + | * Системный компонент редактора: | ||
| + | */ | ||
| + | if (!defined(' | ||
| + | ?> | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <!-- Текст --> | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | </ | ||
| + | |||
| + | <!-- ВЫПАДАЮЩЕЕ МЕНЮ ЗАГОЛОВКОВ (ГОРИЗОНТАЛЬНЫЙ ПИКЕР) --> | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <button type=" | ||
| + | < | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <!-- Ластик / Очистка стиля --> | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | <!-- Кнопки уровней H1-H5 --> | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | <button type=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <!-- Списки и таблицы --> | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | |||
| + | <!-- ИСПРАВЛЕНО: | ||
| + | <div class=" | ||
| + | <button type=" | ||
| + | & | ||
| + | </ | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <!-- Обычный код --> | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | <!-- HTML --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | <!-- PHP --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | <!-- CSS --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | <!-- JS --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | <!-- SQL --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | <!-- BASH --> | ||
| + | <button type=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <!-- Ссылки --> | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | <button type=" | ||
| + | <svg width=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <!-- Каркас модального окна скрыт ниже, без изменений --> | ||
| + | <div id=" | ||
| + | <div style=" | ||
| + | <span onclick=" | ||
| + | <h3 style=" | ||
| + | <div id=" | ||
| + | <div style=" | ||
| + | <input type=" | ||
| + | <span id=" | ||
| + | </ | ||
| + | <div style=" | ||
| + | <span onclick=" | ||
| + | <span onclick=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===== toolbar.js ===== | ||
| + | <code js toolbar.js> | ||
| + | /** | ||
| + | * Функция вставки вики-тегов в поле редактора | ||
| + | */ | ||
| + | function insertTags(openTag, | ||
| + | var txtarea = document.getElementById(" | ||
| + | if (!txtarea) return; | ||
| + | |||
| + | var start = txtarea.selectionStart; | ||
| + | var end = txtarea.selectionEnd; | ||
| + | var selText = txtarea.value.substring(start, | ||
| + | |||
| + | if (!selText) { | ||
| + | selText = defaultText; | ||
| + | } | ||
| + | |||
| + | var replacement = ''; | ||
| + | var newCursorStart = start; | ||
| + | var newCursorEnd = end; | ||
| + | |||
| + | if (openTag.indexOf(' | ||
| + | replacement = openTag.replace(' | ||
| + | txtarea.value = txtarea.value.substring(0, | ||
| + | newCursorStart = start + 3; | ||
| + | newCursorEnd = start + 3; | ||
| + | } else { | ||
| + | replacement = openTag + selText + closeTag; | ||
| + | txtarea.value = txtarea.value.substring(0, | ||
| + | newCursorStart = start; | ||
| + | newCursorEnd = start + replacement.length; | ||
| + | } | ||
| + | |||
| + | txtarea.focus(); | ||
| + | txtarea.selectionStart = newCursorStart; | ||
| + | txtarea.selectionEnd = newCursorEnd; | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Инициализация горячих клавиш | ||
| + | */ | ||
| + | document.addEventListener(" | ||
| + | var editor = document.getElementById(" | ||
| + | if (!editor) return; | ||
| + | |||
| + | editor.addEventListener(" | ||
| + | var isCtrl = e.ctrlKey || e.metaKey; | ||
| + | if (isCtrl) { | ||
| + | if (e.key.toLowerCase() === ' | ||
| + | if (e.key.toLowerCase() === ' | ||
| + | if (e.key.toLowerCase() === ' | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | /** | ||
| + | * Асинхронный движок предпросмотра текста в стиле DokuWiki | ||
| + | */ | ||
| + | function runLivePreview() { | ||
| + | var editor = document.getElementById(" | ||
| + | var previewBlock = document.getElementById(" | ||
| + | var previewContent = document.getElementById(" | ||
| + | |||
| + | if (!editor || !previewBlock || !previewContent) return; | ||
| + | |||
| + | var textValue = editor.value; | ||
| + | |||
| + | var formData = new FormData(); | ||
| + | formData.append(" | ||
| + | |||
| + | var urlParams = new URLSearchParams(window.location.search); | ||
| + | var pageId = urlParams.get(' | ||
| + | |||
| + | previewContent.innerHTML = "< | ||
| + | previewBlock.style.display = " | ||
| + | |||
| + | previewBlock.scrollIntoView({ behavior: ' | ||
| + | |||
| + | // Отправляем запрос на бэкенд | ||
| + | fetch('? | ||
| + | method: ' | ||
| + | body: formData | ||
| + | }) | ||
| + | .then(function(response) { | ||
| + | if (!response.ok) { | ||
| + | throw new Error(" | ||
| + | } | ||
| + | // ИСПРАВЛЕНО: | ||
| + | return response.text(); | ||
| + | }) | ||
| + | .then(function(htmlResult) { | ||
| + | // Мгновенно отрисовываем HTML в блоке превью | ||
| + | previewContent.innerHTML = htmlResult; | ||
| + | }) | ||
| + | .catch(function(error) { | ||
| + | console.error(' | ||
| + | previewContent.innerHTML = "< | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | // Добавьте этот код в самый конец файла assets/ | ||
| + | |||
| + | /** | ||
| + | * Управление выпадающими горизонтальными пикерами Toolbar | ||
| + | */ | ||
| + | document.addEventListener(" | ||
| + | var btnH = document.getElementById(" | ||
| + | var btnCode = document.getElementById(" | ||
| + | |||
| + | var dropH = document.getElementById(" | ||
| + | var dropCode = document.getElementById(" | ||
| + | |||
| + | if (btnH && dropH) { | ||
| + | btnH.addEventListener(" | ||
| + | e.stopPropagation(); | ||
| + | if (dropCode) dropCode.classList.remove(" | ||
| + | dropH.classList.toggle(" | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | if (btnCode && dropCode) { | ||
| + | btnCode.addEventListener(" | ||
| + | e.stopPropagation(); | ||
| + | if (dropH) dropH.classList.remove(" | ||
| + | dropCode.classList.toggle(" | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | document.addEventListener(" | ||
| + | if (dropH) dropH.classList.remove(" | ||
| + | if (dropCode) dropCode.classList.remove(" | ||
| + | }); | ||
| + | }); | ||
| </ | </ | ||
| - | ===== local.php ===== | + | ===== media-modal.js ===== |
| - | < | + | < |
| + | /** | ||
| + | * Системный компонент: | ||
| + | */ | ||
| + | |||
| + | function openMediaModal() { | ||
| + | var modal = document.getElementById(" | ||
| + | if (modal) { | ||
| + | modal.style.display = " | ||
| + | document.getElementById(" | ||
| + | document.getElementById(" | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function closeMediaModal() { | ||
| + | var modal = document.getElementById(" | ||
| + | if (modal) modal.style.display = " | ||
| + | } | ||
| + | |||
| + | /** | ||
| + | * Асинхронная отправка файла на бэкенд без перезагрузки страницы | ||
| + | */ | ||
| + | function sendModalFile(event) { | ||
| + | // Жестко глушим любые системные события браузера, | ||
| + | if (event) { | ||
| + | event.preventDefault(); | ||
| + | event.stopPropagation(); | ||
| + | } | ||
| + | |||
| + | var fileInp = document.getElementById(" | ||
| + | if (!fileInp || !fileInp.files || fileInp.files.length === 0) { | ||
| + | alert(" | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | var urlParams = new URLSearchParams(window.location.search); | ||
| + | var pageId = urlParams.get(' | ||
| + | |||
| + | var targetFile = fileInp.files.item(0); | ||
| + | |||
| + | var formData = new FormData(); | ||
| + | formData.append(" | ||
| + | |||
| + | // Выполняем асинхронный фоновый запрос к бэкенду | ||
| + | fetch('? | ||
| + | method: ' | ||
| + | body: formData | ||
| + | }) | ||
| + | .then(function(response) { | ||
| + | if (!response.ok) { | ||
| + | throw new Error(" | ||
| + | } | ||
| + | return response.json(); | ||
| + | }) | ||
| + | .then(function(data) { | ||
| + | if (data.success) { | ||
| + | // Вставляем полученный тег в поле редактора | ||
| + | insertTags(data.tag, | ||
| + | closeMediaModal(); | ||
| + | } else { | ||
| + | alert(" | ||
| + | } | ||
| + | }) | ||
| + | .catch(function(error) { | ||
| + | console.error(' | ||
| + | alert(" | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | document.addEventListener(" | ||
| + | var fileInp = document.getElementById(" | ||
| + | if (fileInp) { | ||
| + | fileInp.addEventListener(" | ||
| + | if (this.files && this.files.length > 0) { | ||
| + | var currentFile = this.files.item(0); | ||
| + | document.getElementById(" | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| </ | </ | ||
tmp_teh_zadanie_2_23.07.26_18/04.1784820366.txt.gz · Последнее изменение: — VladPolskiy