Гость

Нажмите для авторизации/регистрации

  • Назад
  • Меню
  • Статьи
    • Все
    • Интернет и технологии
    • Laravel и WebDev
    • Linux, Windows, Docker, Etc
    • Новости
    • Прочее
    • Геймдев
    • Смотри как я умею
  • Информация
    • Оферта на дополнительные функции
    • Политика конфиденциальности
    • Тарифы
    • Пользовательское соглашение

Редактирование кода страницы из админ панели с помощью редактора Ace9

  1. Главная
  2. Статьи
  3. Laravel и WebDev
  4. Редактирование кода страницы из админ панели с помощью редактора Ace9
Редактирование кода страницы из админ панели с помощью редактора Ace9
  • 13/08/2022
  • Chebukin Pavel
  • 587 просмотров
  • 0 комментариев

Редактирование кода страницы из админ панели с помощью редактора Ace9

Есть иногда задачи, такие как сделать код некоторых страниц редактируемым из админ панели. Вот и мне второй или третий раз за практику пришлось такое делать. Так как в админке никто левый не шариться и редактирование я делаю только конкретных страниц, а не всех, то больших методов ограничений доступа и анализа контента нет. Но, есть подсветка HTML, CSS и JS. Собственно, все что нужно это редактировать именно блейд шаблон страницы, будь то главная или еще какой-то код. Но, есть пара ньюансов.

Результат из проекта вы видите на скришноте первом, свой вариант у вас будет подобным, но зависить от темы вашей админ панели или ее отсутствия.

Редактор кода страницы с подсветкой синтаксиса - Ace9

Редактором кода будет Ace9 - Скачать его можно Здесь.

Возможности редактора широкие, есть как подсветка синтаксиса, так и разные варианты цветовой темы. 

Скачали редактор и распаковываем его в папку /public/js, так чтобы структура выглядела так - /public/js/ace/src/ace.js

Нам нужно вывод страницы сделать в контроллере для главной и второй для редактирования. Здесь, в тестовом материале, я сделаю оба экшна в одном контроллере, для упрощения. Вам же, в вашем проекте это нужно разместить так, чтобы в контроллере к админ панели не имел доступ никто другой

Создаем контроллер и экшны для обработки сохраняемого кода и его вывода

Итак, создаем контроллер, через artisan или копированием:

php artisan make:controller PageController

После этого наш контроллер появится в папке app/Http/Controllers - PageController.php

Я не буду придерживаться тут полного соответствия CRUD и сделаю достаточно простую обработку, без заморочек. Два простых экшна, один отвечает за вывод страницы, второй за редактирование.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller
{
    public function edit(Request $request){
        if ($request->isMethod('POST')){
            switch ($request->input('action')){
                case 'save':
                   file_put_contents(resource_path('views/pages/mypage.blade.php'),json_decode($request->input('val')));
                    return ['status'=>'ok'];
                    break;
            }
        }
        return view('editcode.page');
    }

    public function show(Request $request){
        return view('pages/mypage.blade.php');
    }
}

Как и писал ранее, тут два экшна, крайне простых по своей сути. 

edit - для редактирования кода страницы, show - для ее отображения. Если вы читаете этот материал, то я предполагаю что практически все стандартные функции PHP и конструкции Laravel вам уже известны. А из всего контроллера, единственное, что стоит пояснить, следующую строчку кода:

                   file_put_contents(resource_path('views/pages/mypage.blade.php'),json_decode($request->input('val')));

Функция file_put_contents сохраняет значение в файл, указанный в первом параметре. Активно используемая функция в PHP.

функция resource_path - возвращает полный путь к файлу указанного в параметре, дополняя его путем к папке resources  фреймворка Laravel. 

и вот главное пояснение - почему я использую декодировние значения передаваемого параметра с json - json_decode. А потому что код страницы, который мы передаем, изобилует разного рода конструкциями, среди которых, часть поломает сохраняемое значение. А передавать в JSON безопасно и вполне надежно.

Создаем представления для страницы с редактором кода и вывода страницы

Вторая часть нашей логики это создать файлы-шаблоны в блейд, отображения и редактирования страницы. 

Создаем файл редактирования кода страницы /resources/views/editcode/page.blade.php, со следующим содержимым:

@extends('layouts.back')
@section('page_body')
    <style>
/* без этого стиля, вы, вероятно, не увидите редактор */
        #editor {
            position: relative;
            min-height: 500px;
            height: 500px;
            width: 100%;
        }
    </style>
    <div class="row">
        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="mt-0 header-title">Редактировать Страницу</h4>
                    <form method="post" enctype="multipart/form-data">
                        @csrf
                        
                                        <div class="row">
                                            <div class="col-md-12 mt-3">
                                                <h6 class=" input-title mt-0">Код страницы</h6>
                                                <div id="editor">{{file_get_contents(resource_path('views/pages/mypage.blade.php'))}}</div>
                                            </div>
                                        </div>
                                    
                        <div class="row">
                            <div class="form-group m-3">
                                <div>
                                    <button type="button" onclick="saveContent()" class="btn btn-primary waves-effect waves-light">
                                        <i class="mdi mdi-content-save"></i>
                                        Сохранить
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/ace/src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
//парой строк выше подключили наш редактор кода
        var editor = null;

        document.addEventListener('DOMContentLoaded',function () {
//цепляем редактор на айди элемента
            editor = ace.edit("editor");
//устанавливаем тему редактора
            editor.setTheme("ace/theme/monokai");
//устанавливаем дефолтную подсветку как HTML
            editor.session.setMode("ace/mode/html");
            // use setOptions method to set several options at once
            editor.setOptions({
                autoScrollEditorIntoView: true,
                copyWithEmptySelection: true,
            });

            editor.setOption("mergeUndoDeltas", "always");
            editor.resize();
        })

//функция сохранения контента файла, 
        function saveContent(){
            content = editor.getValue(); // получаем значение редактора
//передаем код по текущей ссылке
            $.post(location, {
                '_token':'{{csrf_token()}}',//наш csrf токен,
// без которого получим ошибку фреймворка
                action:'save',
//и вот здесь кодируем контент в json
                val:JSON.stringify(content)
            }, function (response) {

            });
        }
    </script>

@endsection

Если вы работали с блейд шаблонами, то должны знать что @extends подгружает основной ваш лайоут, а @section - расширяет в нем необходимый блок содержимым текущей секции из файла. Если вы не понимаете о чем речь, просто возьмите содержимое внутри, между @section('page_body') и @endsection. Так же, я в шаблоне использую стандартную разметку bootstrap, но если вы не подключали какую-либо тему она сильно вам ни на что не повлияет. Предполагаю что понимание HTML и CSS у вас есть и раз вы взялись за редактирование кода из админки, то все это не вызовет у вас сложностей.

Добавление роутинга к сайту, ответственному за обработку редактора и вывода страниц

Переходим к созданию файла вывода нашей страницы: /resources/views/pages/page.blade.php. Вы просто создаете этот файл. Содержимое будете уже наполнять через редактор.

С представлениями закончили. Все что осталось -  указать роутинг для обработки указанных страниц. Для этого открываем routes/web.php и добавляем следующих пару строчек:

Route::match(['get','post'],'edit/page', [\App\Http\Controllers\PageCodeController::class, 'edit'])->name('edit_homepage')

Route::match(['get'],'show/page', [\App\Http\Controllers\PageCodeController::class, 'show'])->name('show_homepage')

После того, как мы сохранили эти файлы, мы можем проверить работу редактора и отображение страницы, перейдя по соответствующим ссылкам:

нашсайт/edit/page -  для редактирования - ее вы видели в самом верху

нашсайт/show/page - для просмотра страницы:

Это и все, что нужно для редактирования страницы шаблонов через админку. Как и говорил, код не проверяется и если вы к подобному функционалу пустите кого-то рукожопого или не понимающего, очень легко можете получить ошибку прямо на странице сайта. Данный код представлен только как образец, в реальном проекте все усложняется дополнительными проверками.

Отзывы

Пока нет комментариев


Для того чтобы оставить комментарий, авторизуйтесь.
Понравился материал? Поделись!
Laravel: CKEditor 4 + Сниппет кода
Ноя24
Laravel: CKEditor 4 + Сниппет кода

Символично на сайтах по ларавел начать наверное с какой-нибудь темы аля "сделать блог". Возможно в дальнейшем и я напишу такой материал. Но в этом я хочу показать как сделать интеграцию визуального редактора CKEditor со сниппетом кода. Саму установку CKEditor и интеграцию загрузки картинок опишу отдельным материалом. Здесь же, условимся что используется...

  • Chebukin Pavel
  • 0
  • 24.11.2021 21:24
Сайтмап для сайта на Laravel - sitemap.xml
Ноя25
Сайтмап для сайта на Laravel - sitemap.xml

Многие разработчики, не понимая простоту создания карты сайта, прибегают к установке дополнительных библиотек. Но, я приверженец минимума зависимостей от сторонних библиотек. Особенно если в этом нет нужды. Горький опыт поддержания проектов с умершими зависимостями, при обновлениях сайта. Да, можно клонировать проект и развивать самому. Но в бизнес-задачах всегда вопрос цены...

  • Chebukin Pavel
  • 0
  • 25.11.2021 22:05
Laravel нотификации в Microsoft Teams
Дек11
Laravel нотификации в Microsoft Teams

Я уже писал в прошлом материале о добавлении нотификаций в Laravel для сообщений в телеграмм. А в этом материале рассмотрим нотификации в Microsoft Teams. Но тут все немного проще, так как мы будем использовать уже готовый пакет. Ставим пакет через композер composer require laravel-notification-channels/microsoft-teams Я не рассматриваю версии ниже 7-й....

  • Chebukin Pavel
  • 0
  • 11.12.2021 16:33
Фотостоки и банки картинок с бесплатными тарифами
Ноя28
Фотостоки и банки картинок с бесплатными тарифами

Разрабатывая проект себе, или небольшому заказчику, сложно позволить себе значимые суммы денег в затратах. До выхода проекта в плюс, часто идет очень не мало временных и интеллектуальных, а так же финансовых затрат. Позволить себе оплату на таких сервисах как Envato Elements сложно. Хотя некоторое время я использовал их подписку и...

  • Chebukin Pavel
  • 0
  • 28.11.2021 21:27
LaraDock или Homestead для разработки под Laravel?
Ноя25
LaraDock или Homestead для разработки под Laravel?

В этом материале не будет подробностей по установке Laradock или Homestead. В нем я опишу лишь то, что по моему мнению стоит ставить. Если будет спрос, опишу установку отдельным материалом. Те кто изучают ларавел, вполне могут испугаться еще и докера, да и хомстеда. Мол, я еще это не выучил, а еще и...

  • Chebukin Pavel
  • 0
  • 25.11.2021 20:28
Создаем канал в Telegram и отправляем в него сообщение через PHP/Laravel просто и легко
Дек10
Создаем канал в Telegram и отправляем в него сообщение через PHP/Laravel просто и легко

Многие проекты используют нотификацию. Некоторые отправляют сообщения на почту, другие в Telegram, Slack и прочее. Сообщения - отличный вариант сообщить о новом заказе, комментарии, материале на сайте или происхождении какого-то события. Для многих вариантов используются библиотеки. Но вот для текстового сообщения в телеграм такое не нужно. Достаточно открыть прямую ссылку с нужными...

  • Chebukin Pavel
  • 0
  • 10.12.2021 23:42

Copyright 2023 © All rights reserved.

Мы в: