Интеграция JsonEditor с администратором Django

Я работаю над интеграциейJSONEditor в админку Джанго. В моей модели есть одно поле, в котором используется Postgres JSON, и редактор дерева в этой библиотеке идеален.

models.py
class Executable(models.Model):
    """ Simplified model for sake of the question."""

    recipe = JSONField(null=True, blank=True)

Я достиг приличного прогресса (я думаю), интегрировав библиотеку JSONEditor в соответствующий экран создания / редактирования в Django Admin. Данныеотображается правильно при загрузке, но по какой-то причине, когда я делаю изменения в JSONEditorWidget, изменения не сохраняются. Я уверен, что есть некоторыеsave переопределите то, над чем мне нужно поработать, или что я упускаю что-то очевидное, но я действительно не уверен, куда идти дальше.

admin.py
import json
from django import forms, utils
from django.contrib import admin

from .models import Executable


class JSONEditorWidget(forms.Widget):
    html_template = """
        <div id='%(name)s_editor_holder'></div>
        <script type="text/javascript">
                var options = {
                    "mode": "tree",
                    "search": true
                };
                var %(name)s_editor = new JSONEditor(container, options);
                var json = %(value)s
                %(name)s_editor.set(json);
                %(name)s_editor.expandAll();

                var json = %(name)s_editor.get(json);
        </script>
        <textarea readonly class="vLargeTextField" cols="40" id="id_%(name)s" name="%(name)s" rows="2" height="20px">%(value)s</textarea>
    """
    def __init__(self, attrs=None, formats=None, defaults=None):
        self.formats = formats
        self.defaults = defaults
        super(JSONEditorWidget, self).__init__(attrs)

    def render(self, name, value, attrs=None):
        if isinstance(value, basestring):  # Edit existing instance
            value = json.loads(value)
        result = self.html_template % {
            'name': name,
            'value': json.dumps(value)
        }
        return utils.safestring.mark_safe(result)


class ExecutableForm(forms.ModelForm):
    recipe = forms.CharField(widget=JSONEditorWidget())    # Kwargs here?

    class Meta:
        model = Executable
        fields = '__all__'

    class Media:
        css = {
            'all': ('http://www.jsoneditoronline.org/app.min.css',)  # TEMP
        }
        js = (
            'http://www.jsoneditoronline.org/app.min.js',   # TEMP
            )


class ExecutableAdmin(admin.ModelAdmin):
    model = Executable
    form = ExecutableForm
    fields = (('request', 'status'), 'recipe')


admin.site.register(Executable, ExecutableAdmin)
 e4c501 июн. 2016 г., 02:14
Извините, что неправильно понял, я не использовал эту библиотеку раньше, но при посещении сайта не было видимых ссылок для разработчиков или GitHub
 Joe Fusaro01 июн. 2016 г., 00:28
@ e4c5 Библиотека хорошо документирована и доступна на Github. Что заставляет вас думать, что это не так? Кстати, я все еще начинающий программист, так что, возможно, я что-то пропустил :)
 Joe Fusaro01 июн. 2016 г., 04:16
@ e4c5 не беспокойся, ссылка скрыта в нижнем колонтитуле, и я мог видеть, как ты мог прийти к такому выводу. Я обновил ссылку в своем сообщении, чтобы она указывала на репозиторий GitHub, а не на демонстрационный сайт (github.com/josdejong/jsoneditor )

Ответы на вопрос(1)

models.py

from django.contrib.postgres.fields import JSONField

class Consumer(models.Model):
    data = JSONField(default=dict, db_index=True)

admin.py:

from django import forms
from django.contrib import admin
from django.utils.safestring import mark_safe
from django.template.loader import render_to_string

from .models import Consumer


class JSONEditorWidget(forms.Widget):

    template_name = 'jsoneditor.html'

    def render(self, name, value, attrs=None):
        context = {
            'data': value,
            'name': name
        }

        return mark_safe(render_to_string(self.template_name, context))


class ConsumerForm(forms.ModelForm):

    class Meta:
        model = Consumer
        fields = '__all__'
        widgets = {
            'data': JSONEditorWidget()
        }

    class Media:
        css = { 'all': ('jsoneditor/dist/jsoneditor.min.css',) }
        js = ('jsoneditor/dist/jsoneditor.min.js', )


class ConsumerAdmin(admin.ModelAdmin):
    list_display = ['pk']
    model = Consumer
    form = ConsumerForm

admin.site.register(Consumer, ConsumerAdmin)

jsoneditor.html:

<div id="{{ name }}_editor"></div>

<textarea cols="40" id="id_{{ name }}" name="{{ name }}" rows="10" required="" style="display: none">{{ data }}</textarea>


<script>
    console.log('jsoneditor.html');
    var container = document.getElementById("{{ name }}_editor");

    var options = {
        modes: ['code', 'tree'],
        search: true,

        onChange: function () {
            var json = editor.get();
            document.getElementById("id_{{ name }}").value=JSON.stringify(json);
        }
    };

    var editor = new JSONEditor(container, options);
    var json = {{ data|safe }};
    editor.set(json);
</script>

Цитата написана сStackEdit.

 psychok703 апр. 2017 г., 15:34
Я давно искал что-то подобное ... спасибо
 comiventor10 июл. 2018 г., 20:16
Извините, но это не сработало для меня. Пришлось добавить незначительные твики esp. преобразование текста JSON в JSONvar json = JSON.parse({{ data|safe }}); и переименованиеonChange вchange, Ниже приводится обновленная сутьgist.github.com/rgupta2/761fd987254703673d83426912dc015d

Ваш ответ на вопрос