While document storage and retrieval are essential, you also need to be careful you’re not missing important, some would say small, details. When planning how your Document Management System (DMS) works (and this is true whether you’re building an internal DMS or you have a DMS app in the planning phase) there’s one component that can let everyone down.
Unless you have a great writing experience, no one is happy.
It lies at the very heart of document management – a rich text editor – and thankfully it’s a component that’s easy to upgrade and integrate. By improving the usability of your system and giving writers a clean, familiar interface (just like MS Word and GDocs) it’s a support element your DMS can’t be without.
Here’s why and how it can be incorporated:
- Rapid customization: TinyMCE’s code is customizable, so it doesn’t require a huge investment of time = save developer effort and hours.
- Diverse features: With plugins like PowerPaste, Exports, Advanced Media Embed, Print, AutoSave, and Word Count, your writers can draft, modify, and publish every type of document they need (even with emoji if you need).
- Fast integration: Using Tiny Cloud, you can activate TinyMCE in your project within minutes.
This article explains how to quickly get started using TinyMCE in a DMS.
What you need to get started
First, you need an API key. This key gives you free access to TinyMCE premium plugins for 14 days. There are two links to follow.
- Navigate to the pricing plans for TinyMCE. Choose the plan that fits your app.
- Go directly to the Get-tiny sign up page to get your FREE API key
Enter the information you would like for your account, and select Sign up. When you arrive at the dashboard screen, your API key is at the top center of the page.
You can use TinyMCE without an API key. However there will be warning messages in the text editor area, however.
This domain is not registered with Tiny Cloud. Please see the quick start guide or create an accountAdding your API key to your app or project removes those warning messages. Here’s how to do that.
Set up TinyMCE Cloud
The following configuration is a demo you can follow, to try out TinyMCE in a DMS.
-
Create an index.html file.
-
With your file open, in the head section, add script tags, and reference TinyMCE Cloud through a CDN link within the script tags. This is what the link looks like:
https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.jsAnd this is where it goes in the index.html file:
<script
src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js"
referrerpolicy="origin"
></script>;
-
Add another pair of script tags, add the following JavaScript. It’s the tinymce.init method, and it’s how you control TinyMCE:
<script>
tinymce.init({
selector: "#editor",
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
height: '700px'
});
</script>-
In the body of your index.html file, add textarea tags, and then save the document. These textarea tags give TinyMCE something to act on.
-
Test run the index.html file by opening it in your browser, or use a local server command with Python or PHP:
This means you’ve successfully tested TinyMCE (Nice work!). It’s time, now, to show you how TinyMCE works within your DMS.
Configure TinyMCE for a versatile DMS
The first change to make is some additional configuration added to the tinymce.init script.
-
Include lines to change the icon and toolbar appearance. Also include the following CSS content to add some style to the DMS content:
<script>
tinymce.init({
selector: "#editor",
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
height: '700px',
toolbar_sticky: true, //Adding design elements for TinyMCE
icons: 'thin',
content_style: ` //Adding important design elements for the DMS content
body {
background: #fff;
}
@media (min-width: 840px) {
html {
background: #eceef4;
min-height: 100%;
padding: 0 .5rem
}
body {
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .15);
box-sizing: border-box;
margin: 1rem auto 0;
max-width: 820px;
min-height: calc(100vh - 1rem);
padding:4rem 6rem 6rem 6rem
}
}
`,
});
</script>-
Include additional TinyMCE configuration to activate the Comments plugin, and the autosave feature:
<script>
tinymce.init({
selector: "#editor",
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable export print autosave",
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
height: '700px',
toolbar_sticky: true,
icons: 'thin',
content_style: `
body {
background: #fff;
}
@media (min-width: 840px) {
html {
background: #eceef4;
min-height: 100%;
padding: 0 .5rem
}
body {
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .15);
box-sizing: border-box;
margin: 1rem auto 0;
max-width: 820px;
min-height: calc(100vh - 1rem);
padding:4rem 6rem 6rem 6rem
}
}
`,
autosave_restore_when_empty: true, //Add autosave and comments configuration
tinycomments_mode: 'embedded',
tinycomments_author: 'john.doe',
tinycomments_author_name: 'John Doe'
});
</script>-
Next, for the DMS framework around the rich text editor on the page, include style tags in your index.html head content:
<style>
body {
margin: 4rem auto;
padding: 0 2rem;
background-color: #f9f9fb;
}
main {
width: 100%;
}
</style>-
Save and reload the demo. You should see the beginnings of TinyMCE’s DMS abilities in your browser:
TinyMCE with DMS content in action
With TinyMCE configured, add some example documentation to see the DMS configuration in action.
This content appears on the TinyMCE DMS Editor page.
-
In the body content of your index.html file there should be textarea tags from the previous steps. Add a heading and paragraph inside the textarea tags:
<h1 style="text-align: center;">What’s your Document Management editing project? </h1>
<p style="text-align: center;">Are you:</p>-
Include an HTML table in the demo:
<h1 style="text-align: center;">What’s your Document Management editing project? </h1>
<p style="text-align: center;">Are you:</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<tbody>
<tr>
<td style="text-align: center;"><strong><span style="font-size: 36pt;">📝</span><br><br>Building a next-generation document creation solution</strong> and want to offer the best rich text editing experience to your content creators?</td>
<td>
<p style="text-align: center;"><span style="font-size: 36pt;"><strong>🗂️</strong></span></p>
<p style="text-align: center;"><strong>Developing an innovative documentation system</strong> to organize, track, store, and share documents, and you want to add editing capabilities?</p>
</td>
</tr>
</tbody>
</table>-
Add the additional paragraphs, and an unordered list:
<p style="text-align: center;">Or perhaps it’s both? Then use the only WYSIWYG editor that’s trusted by <a href="<a href="https://tiny.cloud">https://tiny.cloud</a>" target="_blank" rel="noopener">1.5M developers</a>.</p>
<h3>Curious about TinyMCE?</h3>
<p>Play with this demo to see how TinyMCE works! Try out these popular document creation functions:</p>
<ul class="tox-checklist">
<li class="tox-checklist--checked">Copy complex rich content from another app into the editor</li>
<li>Add or resolve a comment</li>
<li>Drag-and-drop an image from your computer, then edit it within TinyMCE</li>
<li>Any other functionality that you would expect in a document editor!</li>
</ul>-
Save and reload the DMS config. With the example contents added inside the textarea, the ability of TinyMCE to organize and format your DMS content becomes much clearer:
The next steps for your DMS editor
Check out our DMS editor page for further information, and remember that your FREE API key grants free access to Premium Plugin functionality for 14 days, after which you need to either choose a Premium plan or remove the TinyMCE premium features.
|
What you get from TinyMCE’s Premium Plugins: |
|
Contact us for more information if you have any questions on adding TinyMCE to your DMS app. Premium customers and anyone on a 14-day free trial has access to our enterprise-grade professional support team.
