Блог

Главная - Вопросы по программированию - Записать содержимое ace.js редактор для создания файла в Django

Записать содержимое ace.js редактор для создания файла в Django

#python #django #ace-editor

#python #django #ace-редактор

Вопрос:

Я играю с идеей редактирования моих шаблонов Django с сервера. Я знаю, что это далеко от этого, но я написал этот фрагмент кода:

 def editor(request):
  handle=open(os.path.join(settings.BASE_DIR, 'app/code/test.html'), 'r ')
  var=handle.read()
  context = {
    "message": "editor",
    "code": var
  }
  return render(request, 'app/editor.html', context)

Который считывает файл и передает его содержимое в шаблон, где ace.js отображает его в редакторе.

   <div id="editor-container">
    <div id="editor">{{code}}</div>
  </div>

Он отображается просто отлично, и я могу редактировать текст, но если бы я хотел сохранить свои изменения, записав их в файл, кнопка должна была бы перейти к маршруту сохранения, потому что я не использую ajax, но как мне передать новую версию документа в представление для записик файлу?

Ответ №1:

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

Сначала это html-шаблон, в котором находится редактор.

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ace editing</title>
    <style type="text/css" media="screen">
        #editor {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        
        .editor-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="editor-container">
        <div id="editor">
            {{code}}
        </div>
    </div>
    <form method="POST">
        {% csrf_token %} {{form.as_p}}
        <button type="submit">Save</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
    <script>
        var editor = ace.edit('editor');
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/html");
        editor.on('change', function() {
            code_hidden_input = document.querySelector('#id_code');
            code_hidden_input.value = editor.getValue();
            console.log(editor.getValue())
        })
    </script>
</body>

</html>

Теперь в вашем views.py код будет выглядеть следующим образом.

 from django.shortcuts import render
from .forms import MyForm
import os
from django.conf import settings

# Create your views here.
def index(request):
    form = MyForm()
    handle = open(os.path.join(settings.BASE_DIR, 'core/templates/core/test.html'))
    code = handle.read()
    if request.method == "POST":
        form = MyForm(request.POST)
        if form.is_valid():
            print(form.cleaned_data['code'])
            # This is the part where you save the code you have
            # edited to some file
    context = {
        'form': MyForm(),
        'code': code
    }
    return render(request, "core/index.html", context)

В вашем forms.py файл создайте класс с именем My Form , как показано ниже

 from django import forms

class MyForm(forms.Form):
    code = forms.CharField(max_length=10000, widget=forms.HiddenInput())

Вот и все, обратите внимание, что при отправке html с использованием форм вам необходимо очистить свой ввод.

Комментарии:

1. Спасибо, это хорошее решение. Я нашел github.com/django-ace/django-ace и он делает то же самое, но он загружает ace в текстовый ввод и все ace.js параметры встроены в форму django.

Метки: