-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
132 lines (118 loc) · 4.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Twig plugin</title>
</head>
<body>
<div class="column">
<h2>Such a wonderful WYSIWYG <3</h2>
<textarea id="editor" style="display: none;">
{# This is an example of twig parsing.
See the page <source code> in order to display the original twig template #}
{% macro sayHello(name) %}
Hello {{ age > 18 ? 'sir' : firstname }}
{% endmacro %}
{% set username = user.name|default('John Doe') %}
<h1 class="username-{{ user.type }}">Welcome {{ username }} :-)</h1>
{# This image has a dynamic src #}
<img src="{{ asset_url(user.avatar) }}" alt="User avatar">
<p>This is a CKEditor Twig template plugin demo.</p>
{% block title "Template demo page" %}
{% block welcome %}
<p>There is a message for you:</p>
{% if planet == 'hearth' -%}
<p>{{ sayHello('world') }}</p>
{%- else -%}
<p>
{% if galaxy == 'orion' %}
{{ sayHello('Gentle Rosenburg') }}
{% else %}
{{ sayHello(planet) }}
{% endif %}
{% if size(galaxy) > size(ourGalaxy) %} :-) {% else %} :-( {% endif %}
</p>
{%- endif %}
{% endblock %}
<div>
{% for country in countries %}
<p>>> Are you from {{ country.name }}?</p>
{% endfor %}
</div>
<code-language-twig>
<p>This is a Twig "code" block, we can use it for all unsupported twig commandes</p>
<html>{{ a > b ? 'a is greater than b' : '' }}</html>
<ul>
{% for country in countries %}
<li>Are you from {{ country.name }}?</li>
{% endfor %}
</ul>
</code-language-twig>
<raw-html-embed>
<p>This is a "raw" embed html block, we can use it for all unsupported twig DOM construct</p>
<p>This is nice, but as the html embed plugin parses the content, we cannot write everything we want</p>
{{ See the README for more info, and use the Code Blocks plugin instead }}
</raw-html-embed>
</textarea>
</div>
<div class="column">
<p><em>This output will be refreshed a few seconds after the CKEditor update</em></p>
<pre id="output-container"><code id="output" class="twig"></code></pre>
</div>
<script>
window.availableVariables = {
// Object
app: {
type: 'object',
label: 'The default symfony twig variables',
properties: {
// Child object
user: {
type: 'object',
label: 'The current user',
properties: {
username: { type: 'string', label: 'The current user\'s username' },
favoriteColors: {
type: 'array',
children: {
type: 'string'
}
}
}
},
// Boolean
debug: { type: 'boolean', label: 'Is the debug mode enabled?' }
}
},
currentDate: { type: 'datetime' },
planet: { type: 'string' },
galaxy: { type: 'string' },
// Array of objects
countries: {
type: 'array',
children: {
type: 'object',
properties: {
name: { type: 'string' },
code: { type: 'string' }
}
}
},
// Array of arrays
currentPositions: {
type: 'array',
children: {
type: 'array',
children: { type: 'float' }
}
},
// Big objects
locations: {
type: 'object',
properties: [...Array(100).keys()].reduce((obj, cur) => ({...obj, ['property-'+cur]: { type: 'int' }}), {})
}
};
</script>
<script src="dist/bundle.js"></script>
</body>
</html>