Skip to content

Commit 1652b64

Browse files
kemister85kemister85
committed
DOC-2562: Add live-demo for document converters and full feature demo pages.
1 parent 358a588 commit 1652b64

File tree

11 files changed

+226
-19
lines changed

11 files changed

+226
-19
lines changed

‎modules/ROOT/examples/live-demos/exportpdf/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<textarea id="exportpdf">
2+
<h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
3+
<p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
4+
<p><img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" width="573" height="429"></p>
5+
<p>By <a class="N2odk RZQOk eziW_ KHq0c Byk7y KHq0c" href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
6+
<h2>Project Goals</h2>
7+
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners alike. Our primary goals are:</p>
8+
<ul>
9+
<li><em><strong>To empower educators</strong></em> with intuitive tools for content creation, course management, and student assessment.&nbsp;</li>
10+
<li><em><strong>To enhance the learning experience for students</strong></em> through engaging content delivery, interactive features, and personalized learning paths.</li>
11+
<li><em><strong>To increase accessibility and scalability</strong></em> to cater to diverse learning needs and accommodate a growing user base.</li>
12+
</ul>
13+
<h2>System Features</h2>
14+
<p>Streamline will be packed with features to streamline (pun intended) the learning process:</p>
15+
<ul>
16+
<li><strong>Content Management System (CMS)</strong>: A user-friendly interface for educators to create and upload various learning materials, including videos, documents, presentations, and interactive quizzes.</li>
17+
<li><strong>Course Management Tools</strong>: Streamline allows educators to structure courses with clear learning objectives, organize content modules, and manage student enrollment.&nbsp;</li>
18+
<li><strong>Interactive Learning Activities</strong>: The platform will incorporate gamification elements, discussion forums, collaborative assignments, and other interactive features to keep students engaged.&nbsp;</li>
19+
<li><strong>Assessment &amp; Analytics</strong>: Streamline provides educators with tools to create quizzes, track student progress, generate reports, and identify areas for improvement.&nbsp;</li>
20+
<li><strong>Personalized Learning Paths</strong>: The system will utilize machine learning algorithms to personalize learning recommendations and suggest relevant content based on individual student needs and progress.</li>
21+
</ul>
22+
<p><strong>Table 1: Streamline - Target User Groups</strong></p>
23+
<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup>
24+
<tbody>
25+
<tr>
26+
<td><strong>User Group</strong></td>
27+
<td>Benefits</td>
28+
</tr>
29+
<tr>
30+
<td><strong>Educators</strong></td>
31+
<td>Easy content creation, efficient course management, valuable student insights.</td>
32+
</tr>
33+
<tr>
34+
<td><strong>Learners</strong></td>
35+
<td>Engaging learning experience, personalized learning paths, interactive collaboration.</td>
36+
</tr>
37+
<tr>
38+
<td><strong>Administrators</strong></td>
39+
<td>Scalable platform management, user access control, comprehensive reporting tools.</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
<h2><br>Technology Stack</h2>
44+
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
45+
<ul>
46+
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.&nbsp;</li>
47+
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.&nbsp;</li>
48+
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.&nbsp;</li>
49+
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.&nbsp;</li>
50+
</ul>
51+
<h2>Code Example&nbsp;</h2>
52+
<p>Here's a simplified code snippet demonstrating how educators can create a multiple-choice question within the CMS:</p>
53+
<h3>JavaScript</h3>
54+
<p><code>const questionData = {</code><br><code>&nbsp; title: "What is the capital of France?",</code><br><code>&nbsp; options: [</code><br><code>&nbsp; &nbsp; "London",</code><br><code>&nbsp; &nbsp; "Paris", &nbsp;**Subscript for correct answer indicator**</code><br><code>&nbsp; &nbsp; "Berlin",</code><br><code>&nbsp; &nbsp; "Madrid"</code><br><code>&nbsp; ],</code><br><code>&nbsp; correctAnswer: 1</code><br><code>};</code></p>
55+
<p><code>// Submit question data to the LMS backend for storage</code></p>
56+
<blockquote>
57+
<p><strong>Note</strong>: This is a basic example for illustration purposes. The actual code will involve API calls and more complex functionalities. (Normal body text with parenthetical information)</p>
58+
</blockquote>
59+
<h2>Project Timeline&nbsp;</h2>
60+
<ul>
61+
<li><strong>Phase 1 (2 Months)</strong>: System design, development of core functionalities, and front-end prototype creation.</li>
62+
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
63+
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and user interface refinement.</li>
64+
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous improvement through iterative development cycles.&nbsp;</li>
65+
</ul>
66+
<blockquote>
67+
<p><em>This is a preliminary timeline and may be subject to change.</em></p>
68+
</blockquote>
69+
<h2>Conclusion</h2>
70+
<p>Streamline LMS has the potential to become a game-changer in the online learning landscape. By empowering educators and fostering a more engaging learning experience for students, Streamline aims to contribute to a future of accessible and effective education for all.</p>
71+
</textarea>

‎modules/ROOT/examples/live-demos/exportpdf/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
tinymce.init({
2+
selector: 'textarea#exportpdf',
3+
height: '800px',
4+
plugins: [
5+
"exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
6+
"help", "image", "insertdatetime", "link", "lists", "media",
7+
"preview", "searchreplace", "table", "visualblocks",
8+
],
9+
toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
10+
});

‎modules/ROOT/examples/live-demos/exportword/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<textarea id="exportword">
2+
<h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
3+
<p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
4+
<p><img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" width="573" height="429"></p>
5+
<p>By <a class="N2odk RZQOk eziW_ KHq0c Byk7y KHq0c" href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
6+
<h2>Project Goals</h2>
7+
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners alike. Our primary goals are:</p>
8+
<ul>
9+
<li><em><strong>To empower educators</strong></em> with intuitive tools for content creation, course management, and student assessment.&nbsp;</li>
10+
<li><em><strong>To enhance the learning experience for students</strong></em> through engaging content delivery, interactive features, and personalized learning paths.</li>
11+
<li><em><strong>To increase accessibility and scalability</strong></em> to cater to diverse learning needs and accommodate a growing user base.</li>
12+
</ul>
13+
<h2>System Features</h2>
14+
<p>Streamline will be packed with features to streamline (pun intended) the learning process:</p>
15+
<ul>
16+
<li><strong>Content Management System (CMS)</strong>: A user-friendly interface for educators to create and upload various learning materials, including videos, documents, presentations, and interactive quizzes.</li>
17+
<li><strong>Course Management Tools</strong>: Streamline allows educators to structure courses with clear learning objectives, organize content modules, and manage student enrollment.&nbsp;</li>
18+
<li><strong>Interactive Learning Activities</strong>: The platform will incorporate gamification elements, discussion forums, collaborative assignments, and other interactive features to keep students engaged.&nbsp;</li>
19+
<li><strong>Assessment &amp; Analytics</strong>: Streamline provides educators with tools to create quizzes, track student progress, generate reports, and identify areas for improvement.&nbsp;</li>
20+
<li><strong>Personalized Learning Paths</strong>: The system will utilize machine learning algorithms to personalize learning recommendations and suggest relevant content based on individual student needs and progress.</li>
21+
</ul>
22+
<p><strong>Table 1: Streamline - Target User Groups</strong></p>
23+
<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup>
24+
<tbody>
25+
<tr>
26+
<td><strong>User Group</strong></td>
27+
<td>Benefits</td>
28+
</tr>
29+
<tr>
30+
<td><strong>Educators</strong></td>
31+
<td>Easy content creation, efficient course management, valuable student insights.</td>
32+
</tr>
33+
<tr>
34+
<td><strong>Learners</strong></td>
35+
<td>Engaging learning experience, personalized learning paths, interactive collaboration.</td>
36+
</tr>
37+
<tr>
38+
<td><strong>Administrators</strong></td>
39+
<td>Scalable platform management, user access control, comprehensive reporting tools.</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
<h2><br>Technology Stack</h2>
44+
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
45+
<ul>
46+
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.&nbsp;</li>
47+
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.&nbsp;</li>
48+
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.&nbsp;</li>
49+
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.&nbsp;</li>
50+
</ul>
51+
<h2>Code Example&nbsp;</h2>
52+
<p>Here's a simplified code snippet demonstrating how educators can create a multiple-choice question within the CMS:</p>
53+
<h3>JavaScript</h3>
54+
<p><code>const questionData = {</code><br><code>&nbsp; title: "What is the capital of France?",</code><br><code>&nbsp; options: [</code><br><code>&nbsp; &nbsp; "London",</code><br><code>&nbsp; &nbsp; "Paris", &nbsp;**Subscript for correct answer indicator**</code><br><code>&nbsp; &nbsp; "Berlin",</code><br><code>&nbsp; &nbsp; "Madrid"</code><br><code>&nbsp; ],</code><br><code>&nbsp; correctAnswer: 1</code><br><code>};</code></p>
55+
<p><code>// Submit question data to the LMS backend for storage</code></p>
56+
<blockquote>
57+
<p><strong>Note</strong>: This is a basic example for illustration purposes. The actual code will involve API calls and more complex functionalities. (Normal body text with parenthetical information)</p>
58+
</blockquote>
59+
<h2>Project Timeline&nbsp;</h2>
60+
<ul>
61+
<li><strong>Phase 1 (2 Months)</strong>: System design, development of core functionalities, and front-end prototype creation.</li>
62+
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
63+
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and user interface refinement.</li>
64+
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous improvement through iterative development cycles.&nbsp;</li>
65+
</ul>
66+
<blockquote>
67+
<p><em>This is a preliminary timeline and may be subject to change.</em></p>
68+
</blockquote>
69+
<h2>Conclusion</h2>
70+
<p>Streamline LMS has the potential to become a game-changer in the online learning landscape. By empowering educators and fostering a more engaging learning experience for students, Streamline aims to contribute to a future of accessible and effective education for all.</p>
71+
</textarea>

‎modules/ROOT/examples/live-demos/exportword/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
tinymce.init({
2+
selector: 'textarea#exportword',
3+
height: '800px',
4+
plugins: [
5+
"exportword", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
6+
"help", "image", "insertdatetime", "link", "lists", "media",
7+
"preview", "searchreplace", "table", "visualblocks",
8+
],
9+
toolbar: "undo redo | exportword | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
10+
});

‎modules/ROOT/examples/live-demos/full-featured/example.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
1111

1212
tinymce.init({
1313
selector: 'textarea#full-featured',
14-
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
14+
plugins: 'importword exportword exportpdf ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
1515
tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
1616
tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
1717
tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
@@ -26,7 +26,7 @@ tinymce.init({
2626
}
2727
},
2828
menubar: 'file edit view insert format tools table tc help',
29-
toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
29+
toolbar: "undo redo | importword exportword exportpdf | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
3030
autosave_ask_before_unload: true,
3131
autosave_interval: '30s',
3232
autosave_prefix: '{path}{query}-{id}-',
@@ -412,6 +412,25 @@ tinymce.init({
412412
.catch(onerror);
413413
});
414414
},
415+
exportpdf_converter_options: {
416+
'format': 'Letter',
417+
'margin_top': '1in',
418+
'margin_right': '1in',
419+
'margin_bottom': '1in',
420+
'margin_left': '1in'
421+
},
422+
exportword_converter_options: {
423+
'document': {
424+
'size': 'Letter'
425+
}
426+
},
427+
importword_converter_options: {
428+
'formatting': {
429+
'styles': 'inline',
430+
'resets': 'inline',
431+
'defaults': 'inline',
432+
}
433+
},
415434
/*
416435
The following settings require more configuration than shown here.
417436
For information on configuring the mentions plugin, see:

‎modules/ROOT/examples/live-demos/full-featured/index.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -414,7 +414,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak
414414

415415
tinymce.init({
416416
selector: 'textarea#full-featured',
417-
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
417+
plugins: 'ai preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory importword exportword exportpdf',
418418
editimage_cors_hosts: ['picsum.photos'],
419419
tinydrive_token_provider: (success, failure) => {
420420
success({ token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJqb2huZG9lIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.Ks_BdfH4CWilyzLNk8S2gDARFhuxIauLa8PwhdEQhEo' });
@@ -433,7 +433,7 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak
433433
}
434434
},
435435
menubar: 'file edit view insert format tools table tc help',
436-
toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
436+
toolbar: "undo redo | importword exportword exportpdf | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
437437
autosave_ask_before_unload: true,
438438
autosave_interval: '30s',
439439
autosave_prefix: '{path}{query}-{id}-',
@@ -565,6 +565,25 @@ tinymce.ScriptLoader.loadScripts(['https://cdn.jsdelivr.net/npm/faker@5/dist/fak
565565
}
566566
],
567567
ai_request,
568+
exportpdf_converter_options: {
569+
'format': 'Letter',
570+
'margin_top': '1in',
571+
'margin_right': '1in',
572+
'margin_bottom': '1in',
573+
'margin_left': '1in'
574+
},
575+
exportword_converter_options: {
576+
'document': {
577+
'size': 'Letter'
578+
}
579+
},
580+
importword_converter_options: {
581+
'formatting': {
582+
'styles': 'inline',
583+
'resets': 'inline',
584+
'defaults': 'inline',
585+
}
586+
},
568587
revisionhistory_fetch: fetchRevisions,
569588
revisionhistory_author: {
570589
id: 'john.doe',

0 commit comments

Comments
 (0)