Genii Weblog
CKEditor #5 - Powering plugins with other extensions
Tue 12 Jun 2018, 01:44 PM
Tweetby Ben Langhinrichs
This is the fifth in a series on configuring CKEditor. In my previous post, I showed how to use a Domino form and view to add doclinks. In this, I'm going to show how to simulate the Notes way of attaching documents along with attachment icons that launch the files. Note: I have used our product, AppsFidelity, for the example. Other topics should be much less product focused, but this seems the best way to demonstrate it..
1) Our goal is to create specialized images as attachment icons to launch files as in Notes client
In other words, the first of the following two images is what we want to see on the web, rather than the second which is what we see now.
The default is to add the attachments at the bottom as in this image. This loses context. For example, you can't tell that I added Bonnie's rap sheet first, so the order they are mentioned doesn't match the order they are presented. Iin my example above, the location tells you all you need to know. Imagine the confusion possible when a long document with many attachments is displayed.
2) Adding the plugin and dialog
This process is very similar to the Doclink example in the previous post, with one notable exception being that we open the Domino form and save it as a temporary document rather than just reading it.
See in this brief video:
3) How the attachment image is generated
The attachment icon with the text embedded is a challenge. When the file is uploaded to the temporary document, an extra step must generate the attachment icon. This can be accomplished with the C API and an image library. Here, I use AppsFidelity as an extension manager so when the temp document is saved, the image is generated as a second attachment. Then, the HTML inserted in the plug knows where the image will be. Alternately, you could use a web services call or other extension to return the image.
4) How the attachment moves from the temporary document to the original (edited) document
You could leave the attachment in a separate document, but that leads to management and security issues. Instead, on submission of the original document, the save process copies the attachment over, changes the HTML to point internally, and removes the temporary document.
5) How this looks if opened in Notes client
If you have a web only solution, it doesn't much matter how this works in Notes, but if you did open it, you would have an image with a link to the web document which would then open a browser to open the attachment. To avoid this since we already have an extension manager, we can catch the open from Notes and convert the MIME to rich text with "normal" Notes attachments.
6) A multitude of other extensions are possible
Once you open up the idea of actions that reach outside of the local editor, you could have an icon that did a pull request on a stock ticker symbol and inserted a chart, or you could have a dropdown with different boilerplate language which could get inserted, or you could have a translate button which would add (or replace selected content) a translated version. The sky is the limit. The imporatnt thing to realize is that you can extend the toolbar in ways that server your business needs and add capabilities beyond simple rich text manipulation.
7) Commercial side-note - what AppsFidelity brings to the table
This file attachment action requires either AppsFidelity or other extensive coding. Subsequent topics in this series will not be similarly focused, but I wanted one last opportunity to invite you to try AppsFidelity by requesting an AppsFidelity evaluation license. See the ways AppsFidelity can empower your applications, both for web only and web/Notes applications, and for Classic or XPage apps.
All topics in the series
Copyright © 2018 Genii Software Ltd.
What has been said: