-
Notifications
You must be signed in to change notification settings - Fork 0
/
ckeditor.html
61 lines (54 loc) · 1.81 KB
/
ckeditor.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
<script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="editor">
<h1>Welcome, {{user.name}}!</h1>
{{#if user.isMember}}
<p>Thank you for being a loyal member, {{user.name}}!</p>
{{else}}
<p>Hello, {{user.name}}! Join us today for exclusive benefits!</p>
{{/if}}
<h2>Your Orders:</h2>
<ul>
{{#each orders}}
<li>Order #{{id}}: {{item}} - {{quantity}} pcs @ ${{price}} each
{{#if isDiscounted}}<strong>(Discount Applied)</strong>{{/if}}
</li>
{{/each}}
</ul>
<p>Total Orders: {{orders.length}}</p>
<p>Total Cost: ${{totalCost}}</p>
</textarea>
<button onclick="renderTemplate()">Render Template</button>
<div id="output"></div>
<script>
CKEDITOR.replace('editor');
const context = {
user: {
name: 'Kourosh',
isMember: true
},
orders: [
{ id: 1, item: 'Laptop', quantity: 1, price: 1000, isDiscounted: true },
{ id: 2, item: 'Mouse', quantity: 2, price: 25, isDiscounted: false },
{ id: 3, item: 'Keyboard', quantity: 1, price: 50, isDiscounted: true }
],
totalCost: function() {
return this.orders.reduce((sum, order) => sum + (order.quantity * order.price), 0);
}
};
function renderTemplate() {
const templateSource = CKEDITOR.instances.editor.getData();
const template = Handlebars.compile(templateSource);
const renderedHtml = template(context);
document.getElementById('output').innerHTML = renderedHtml;
}
</script>
</body>
</html>