将 ace.js 编辑器的内容写入 Django 文件

Question

我正在尝试从服务器编辑我的 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, 但我如何将新版本的文档传递给要写入文件的视图？

Answer 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 的 class，如下所示

from django import forms

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

就是这样，请注意，在使用表单提交 html 时，您需要清理输入内容。

将 ace.js 编辑器的内容写入 Django 文件

Write contents of ace.js editor to file in Django

python

django

ace-editor