Skip to content

Commit e0a86cf

Browse files
kemister85kemister85
authored
DOC-2562: Add live-demo for document converters and full feature demo pages. (#3496)
* DOC-2562: Add live-demo for document converters and full feature demo pages. * Remove excluded plugins from the excluded plugins table. * DOC-2562: update html within demos and include some converter options.
1 parent 8c17301 commit e0a86cf

File tree

12 files changed

+259
-29
lines changed

12 files changed

+259
-29
lines changed

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
5+
<figure class="image">
6+
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
7+
alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
8+
<figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
9+
</figure>
10+
11+
<p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
12+
13+
<h2>Project Goals</h2>
14+
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
15+
<ul>
16+
<li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
17+
<li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
18+
<li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
19+
</ul>
20+
21+
<h2>System Features</h2>
22+
<p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
23+
<ul>
24+
<li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
25+
<li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
26+
<li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
27+
<li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
28+
<li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
29+
</ul>
30+
31+
<h3>Table 1: Streamline - Target User Groups</h3>
32+
<table style="border-collapse: collapse; width: 100%;" border="1">
33+
<thead>
34+
<tr>
35+
<th style="text-align: left;">User Group</th>
36+
<th style="text-align: left;">Benefits</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr>
41+
<td><strong>Educators</strong></td>
42+
<td>Easy content creation, efficient course management, and valuable student insights.</td>
43+
</tr>
44+
<tr>
45+
<td><strong>Learners</strong></td>
46+
<td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
47+
</tr>
48+
<tr>
49+
<td><strong>Administrators</strong></td>
50+
<td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
55+
<h2>Technology Stack</h2>
56+
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
57+
<ul>
58+
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
59+
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
60+
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
61+
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
62+
</ul>
63+
64+
<h2>Project Timeline</h2>
65+
<ul>
66+
<li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
67+
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
68+
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
69+
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
70+
</ul>
71+
72+
<blockquote>
73+
<p><em>This timeline is preliminary and may be subject to change.</em></p>
74+
</blockquote>
75+
76+
<h2>Conclusion</h2>
77+
<p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
78+
</textarea>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
tinymce.init({
2+
selector: 'textarea#exportpdf',
3+
height: '800px',
4+
plugins: [
5+
"exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "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+
image_caption: true,
11+
exportpdf_converter_options: {
12+
format: 'A4',
13+
margin_top: '1in',
14+
margin_right: '1in',
15+
margin_bottom: '1in',
16+
margin_left: '1in'
17+
}
18+
});

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
5+
<figure class="image">
6+
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
7+
alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
8+
<figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
9+
</figure>
10+
11+
<p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
12+
13+
<h2>Project Goals</h2>
14+
<p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
15+
<ul>
16+
<li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
17+
<li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
18+
<li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
19+
</ul>
20+
21+
<h2>System Features</h2>
22+
<p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
23+
<ul>
24+
<li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
25+
<li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
26+
<li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
27+
<li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
28+
<li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
29+
</ul>
30+
31+
<h3>Table 1: Streamline - Target User Groups</h3>
32+
<table style="border-collapse: collapse; width: 100%;" border="1">
33+
<thead>
34+
<tr>
35+
<th style="text-align: left;">User Group</th>
36+
<th style="text-align: left;">Benefits</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr>
41+
<td><strong>Educators</strong></td>
42+
<td>Easy content creation, efficient course management, and valuable student insights.</td>
43+
</tr>
44+
<tr>
45+
<td><strong>Learners</strong></td>
46+
<td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
47+
</tr>
48+
<tr>
49+
<td><strong>Administrators</strong></td>
50+
<td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
55+
<h2>Technology Stack</h2>
56+
<p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
57+
<ul>
58+
<li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
59+
<li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
60+
<li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
61+
<li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
62+
</ul>
63+
64+
<h2>Project Timeline</h2>
65+
<ul>
66+
<li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
67+
<li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
68+
<li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
69+
<li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
70+
</ul>
71+
72+
<blockquote>
73+
<p><em>This timeline is preliminary and may be subject to change.</em></p>
74+
</blockquote>
75+
76+
<h2>Conclusion</h2>
77+
<p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
78+
</textarea>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
exportword_converter_options: {
11+
document: {
12+
size: 'A4',
13+
margins: {
14+
top: "1in",
15+
bottom: "1in",
16+
left: "1in",
17+
right: "1in"
18+
}
19+
}
20+
}
21+
});

‎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',

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<textarea id="importword">
2+
<h1 style="font-size: 1.5em; color: black; margin-top: 0; text-align: left;">Import from MS Word</h2>
3+
<ol style="padding-left: 20px; margin: 10px 0;">
4+
<li style="margin-bottom: 10px;">Click the <strong>Import from Word</strong> button in the toolbar or select <strong>File &gt; Import from Word</strong> in the menu.</li>
5+
<li style="margin-bottom: 10px;">Select the DOCX file to upload.</li>
6+
<li style="margin-bottom: 10px;">Edit the imported content however you wish.</li>
7+
</ol>
8+
<p style="font-size: 0.9em; color: #555; text-align: left; margin-top: 15px;">Learn more about <strong>Import from Word</strong> and our other document converters (<a href="https://tiny.cloud/tinymce/features/export-word/" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">Export to Word</a> and <a href="https://tiny.cloud/tinymce/features/export-pdf" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">Export to PDF</a>) at <a href="https://tiny.cloud" style="color: #0066cc; text-decoration: none; border-bottom: 1px dotted #0066cc;">https://tiny.cloud</a>.</p>
9+
</textarea>

‎modules/ROOT/examples/live-demos/importword/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#importword',
3+
height: '800px',
4+
plugins: [
5+
"importword", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
6+
"help", "image", "insertdatetime", "link", "lists", "media",
7+
"preview", "searchreplace", "table", "visualblocks",
8+
],
9+
toolbar: "undo redo | importword | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
10+
});

0 commit comments

Comments
 (0)