Гость

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

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

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

  1. Главная
  2. Статьи
  3. Laravel и WebDev
  4. Редактирование кода страницы из админ панели с помощью редактора Ace9
Редактирование кода страницы из админ панели с помощью редактора Ace9
  • 13/08/2022
  • Chebukin Pavel
  • 799 просмотров
  • 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 - для просмотра страницы:

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

Отзывы

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


Для того чтобы оставить комментарий, авторизуйтесь.
Понравился материал? Поделись!
PHPStorm vs InteliJ Ultimate для разработки под Laravel и PHP
Июл23
PHPStorm vs InteliJ Ultimate для разработки под Laravel и PHP

Это сравнение двух известных IDE компании JetBrains. Возможно в чем-то зацеплю и краем WebStorm. Это мое личное мнение и оно может отличаться. Сразу уточню, цену на IDE сравниваю с текущей своей скидкой - 40%. С меньшей скидкой разница в стоимости между продуктами значительно растет. Уточняю так же что в InteliJ...

  • Chebukin Pavel
  • 0
  • 23.07.2022 12:47
Laravel: Nova, Orchid или кастомная/собственная админ панель
Июл23
Laravel: Nova, Orchid или кастомная/собственная админ панель

Очень часто под очередной проект приходится делать админ панель. Чаще всего в MVP проектах никто не закладывает дизайн админ панели. Берется уже или полу готовая, или делается с нуля, чаще всего на купленной теме. Чтобы сделать свою панель, перекрывающую 80% типовых потребностей многих сайтов потребуется пару дней возни, а в...

  • Chebukin Pavel
  • 0
  • 23.07.2022 10:30
Laravel, подключаем комментарии Disqus на сайт
Дек11
Laravel, подключаем комментарии Disqus на сайт

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

  • Chebukin Pavel
  • 0
  • 11.12.2021 18:29
Добавляем на сайт комментарии Facebook для Laravel и не только
Дек02
Добавляем на сайт комментарии Facebook для Laravel и не только

Добавить комментарии можно на любой сайт. Но так как многих сайтов это означает добавление кода, работу с базой данных, модерацию и т.п. В этом ключе выгодно отличается установка комментариев от соц. сети Facebook. Аналогичные можно установить от VK, Disqus и других платформ. В этот раз рассмотрим именно подключение фейсбука. В...

  • Chebukin Pavel
  • 0
  • 02.12.2021 21:12
Создадим Нотификацию В Laravel, Отправляющую Сообщение В Телеграмм
Дек11
Создадим Нотификацию В Laravel, Отправляющую Сообщение В Телеграмм

Это продолжение материала по созданию канала и бота в телеграмм, для нотификаций. В этом материале мы лишь создадим саму нотификацию Laravel и будем отправлять ее в очередь, при возникновении события. Создадим канал telegram, для нотификации через него php artisan make:channel telegram Это то, куда доставляется сообщение. Сам файл: app/Broadcasting/telegram.php. В нем...

  • Chebukin Pavel
  • 0
  • 11.12.2021 00:58
Лучшие редакторы и среды разработки для разработчиков
Дек18
Лучшие редакторы и среды разработки для разработчиков

Выбор лучшего редактора и IDE Холивары между тем лучшим ли является для разработки Emacs или Vi(m) потихоньку отходят в прошлое. Уже сложно их представить полноценными средами разработки. Ведь несмотря на всю их практичность, соревноваться в удобстве с современными комбайнами они могут только при крайне длительной подготовке. Но чтобы выбрать лучший для себя...

  • Chebukin Pavel
  • 0
  • 18.12.2021 20:32

Copyright 2023 © All rights reserved.

Мы в: