django-ace / django-ace Goto Github PK

Currently, it looks like this widget only functions as a form option with a submission. Is there a way to just render the editor with code inside of it, instead of having it as a place where the user would type and submit?

Effectively, I want a website where this editor has existing code, and the user can edit or play around with it, but not submit it.

The LICENSE references an extremely old tri-license (MPL/LGPL/GPL) from Ace 0.2.0, but this library packages version 1.4.8. Ace changed their license to BSD eight years ago: https://github.com/ajaxorg/ace/blob/master/LICENSE

Our organization is unable to use this library until the LICENSE file properly reflects Ace's BSD license and drops the reference to version 0.2.0.

Happy to submit a PR to change this.

Currently getting some errors when utilizing django-ace in an iframe.

WARNING django.request: Not Found: /iframe/worker-html.js

Note: I don't think this is directly caused by django-ace being in an iframe, but I thought I'd mention it.

Additionally, django-ace seems to behave perfectly fine even with this error being present.

Here is my AceWidget

    head_html = CharField(
        widget=AceWidget(
            mode="html",
            theme="twilight",
            width="100%",
            toolbar=False,
            showprintmargin=False,
        ),
        label="Custom HTML (head)",
        required=False,
    )

I am getting this value in the editor:
ההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

I have the following code in JS:

var editor = ace.edit("editor");
editor.session.setMode("ace/mode/json")
        editor.setOptions({
            mode: "json",
            wrap: true,
        });

If I remove these lines, nothing is added in the editor. How can I solve this issue?

Hi!
I tried to use a widget called AceWidget, but I don't know why it's not rendering this widget when I put it into the inline module and it's rendering a textarea by default.

code example:

from django_ace import AceWidget
from django import forms
from django.forms import formset_factory, BaseInlineFormSet
from prettyjson import PrettyJSONWidget
from django.contrib import admin

class StatementForm(forms.ModelForm):
    class Meta:
        model = Statements
        fields = ['query', 'executed', 'logs']
        widgets = {
            'logs': PrettyJSONWidget(attrs={'initial': 'parsed'}),
            'query': AceWidget(mode='sql')
        }

StatementFormSet = formset_factory(StatementForm, formset=BaseInlineFormSet, can_order=True)

class StatementTabularInline(admin.StackedInline):
    model = Statements
    formset = StatementFormSet
    readonly_fields = ['executed', 'logs', ]

@admin.register(Ticket)
class TicketAdmin(admin.ModelAdmin):
    inlines = [StatementTabularInline]

if I put the widget into the form without a "StackedInline" directly, It works. but if I put the form into the whatever inline module related, It doesn't render the widget

result of the code above:

When using django-ace with django 4 it shows on the client-side error 404 for all static files

Python 3.9.5
Django v3.2.4
django_ace v1.0.11

JavaScript error:

Refused to execute script from 'http://127.0.0.1:8000/static/django_ace/ace/worker-json.js' because its MIME type ('text/plain') is not executable.

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://127.0.0.1:8000/static/django_ace/ace/worker-json.js' failed to load.

I'm trying to use SnippetForm as:

views.py

def landing(request,*args,**kwargs):
    global content
    return render(request, 'snippet.html',{'form':SnippetForm(initial={'text': content})})

def console(request,*args,**kwargs):
     content = some text based on function 
    return render(request,'console.html',{'form': content})

console.html

{{form}}

snippet.html

<div>
          <form action="" id="editor" method="post">
              {% csrf_token %}
              <div class="row">
                {{ form.as_p }}
              </div>
              <span>
                <input type="button" class="btn btn-info" name="editedContent" id="contentSubmit" value="Submit" />
                <!-- <input type="submit" class="btn btn-info" name="editedContent" id="contentSubmit"/> -->
                <input type="submit" class="btn btn-info" name="cancelContent" id="cancelOperation" value="Cancel" />
              </span>
          </form>
</div>

Using Ajax request to update form:

$("#fileSubmit").click(function(e){
   e.preventDefault();
   var csrftoken=getCookie('csrftoken')
   var appName = $('#appNames').val()
   var fileName = $('#fileNames').val()
   console.log(appName,fileName)
   var data={'csrfmiddlewaretoken':csrftoken,group:$('#groupNames').val(),'appName':appName,'fileName':fileName,type: 'console'};
   console.log(data)
  $.ajax({
    url : "{% url 'console1:console' %}",
    type : "POST",
    data : data,
    success : function(result){
      console.log("Result",result);
      // $('#console').html(result);
      document.getElementById('id_text').innerHTML = result;
      document.getElementsByTagName('label').innerHTML = "";
      displayConsole();
    },
    error : function(error){
      console.log(error.responseText);
    }
  });
});

But the content is now updating can i know how to do it.. Thank you!!

Django trims whitespaces in json mode, so i found fix. I added code:

        if (mode == "json") {
            editor.setValue(JSON.stringify(JSON.parse(editor.getSession().getValue()), null, 2));
        }

to django_ace/static/django_ace/widgets.js in apply_widget() (151 line). If this fix ok, i can create pull request.
Thanks.

Because parent CSS class flex-container is a flexbox. So we need django-ace-editor grows all the remain space.

Just do this:

.django-ace-editor {
    position: relative;
    flex: 1;
}

Hello, is it possible to have autocomplete for the keywords and existing variables inside the editor, i know that this is doable in ace but i didn't find the toggle in django-ace