ace-code-editor.html.twig 1.22 KB
Newer Older
1
2
3
4
5
6
7
8
{% set format = attr.format|default('javascript') %}
{% set height = attr.height|default('400') %}



<textarea id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" data-id="{{ attr['data-id']|default('') }}">{{ form.vars.value }}</textarea>
<pre id="editor{{ form.vars.id }}" class="ace-editor" style="height: {{ height }}px;"></pre>

9
<script src="{{ asset('js/ace/ace.js') }}"></script>
10
{% if format != 'javascript' %}
11
    <script src="{{ asset('js/ace/mode-' ~ format ~ '.js') }}"></script>
12
{% endif %}
13
<script src="{{ asset('js/ace/theme-monokai.js') }}"></script>
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<script>
    var editor{{ form.vars.id }} = ace.edit("editor{{ form.vars.id }}", {
        mode: "ace/mode/{{ format }}",
        theme: "ace/theme/monokai",
        showPrintMargin: false
    });

    var textarea{{ form.vars.id }} = $('#{{ form.vars.id }}').hide();
    textarea{{ form.vars.id }}.change(function() {
        editor{{ form.vars.id }}.getSession().setValue(textarea{{ form.vars.id }}.val());
    })
    editor{{ form.vars.id }}.getSession().setValue(textarea{{ form.vars.id }}.val());
    editor{{ form.vars.id }}.getSession().on('change', function(){
      textarea{{ form.vars.id }}.val(editor{{ form.vars.id }}.getSession().getValue());
    });
</script>