I wanted to share a resource we developed to help with a common WebDirect requirement: Rich Text Editing that actually prints correctly.
This project solves two distinct problems that usually block this workflow:
Problem 1: The Input Barrier FileMaker WebDirect does not support rich text entry in native fields. If you want bold, colors, or lists, you are forced to use a WebViewer.
Problem 2: The Output Trap (The "Bitmap Problem") Once you move data into a WebViewer (or the official Claris Add-on), you usually lose the ability to use that data professionally:
Printing: WebViewers print as low-res, blurry screenshots (bitmaps), not crisp text.
Search: The text inside isn't indexed or searchable via native Finds.
Theme: It doesn't respect your layout's Dark/Light mode automatically.
The Solution: The "Native Bridge" We built an open-source engine that connects a modern web editor (Quill.js v2.0) to FileMaker's native text engine.
Instead of saving HTML, it translates the web content into Native FileMaker Styled Text.
The Result:
Problem 1 Solved: Users get a full modern editor in WebDirect.
Problem 2 Solved: The data is saved as Native Rich Text (as formatted). This means your bold, colors, fonts, and lists are preserved in the text field itself. Your PDFs render as sharp, vector graphics, and the text is fully searchable.
I've written up a guide on the architecture and posted the unlocked .fmp12 file for download.
This is amazing, and such great timing too. I was literally discussing a requirement with my boss for our framework solution which was a rich text editor, but we needed some way to be able to display the entered text in things like portals, print-outs, and for indexing purposes etc. This solves that problem beautifully ! Kudos to you and your team.
@Axelar Do you happen to have a FileMaker version of this ? Your instructions say to copy the script but it’s just a plain text file? Do I have to recreate that whole thing from scratch or is there an easier way?
Your article says the repository has an fmp12 file but I can’t find one.
It is a genuine honor to have you looking at this. Your work has been a massive contribution to the community and a major influence on my own development journey. It feels incredibly rewarding to be able to give something back that solves a problem for you.
The file is not in the main code list; it is located in the "Releases" section on the right-hand sidebar.
I implemented it today in our framework solution in a note (results below)
I made a couple of tweaks for our version:
• Integrated it with Jeremy Browns JS in FM Framework (which is also built into our framework)
• I also pass the html and plain text field names (fully referenced) to the setFMHTML function and they are stored in variables in the JS. The reason is that when the content is written back, they’re passed back in the JSON payload, so that I can dynamically set the fields by name rather than hard-coding into the script. this allows more reusability of the control throughout the solution.
• A couple of minor formatting changes to the toolbar to border colours, and height etc. Just make sit more seamless with our layout.
I did note that the indent toolbar option was missing. Was this an intentional decision, I did wonder whether it is too difficult to convert indents back into FileMaker text?
Another question I had was around images. It would be great if it could allow the insertion of images, which usually are base64 encoded into the html. They’d just get ignored in the conversion back to plain-text. This would allow us to use this editor as our main markdown editor for other things as well as t his. Currently we have a TinyMCE implementation also for things like building email templates. It is more fully featured with tables, links, images etc, but it does not convert back to FileMaker text.
That's a great solution. The only thing stopping me from using it is that the cursor loses focus after each text entry and you have to click into the text editor again to prevent the FileMaker message “Press the Tab key, click into a field,… ” from appearing. I’m afraid that this an annoying deal breaker for me. Tested on macOS Tahoe with FileMaker Pro 21. Otherwise, it's a really great implementation!
Just a matter of time management, and in reality lack of use case, our client just wanted to color code their notes, Blue it was me, Red it was Captain Kirk.
My use case is one of using a single text editor for multiple purposes.
If you’re wanting a RTE to enter in rich text onto a record with the intention of being able to display/index/use that text in a non-html way, then yes the images would be ignored.
However, if you use the RTE to do something like compose an email template that you are using to send mail out from the database, then absolutely images are a very useful and important feature.
you can just drag and drop any compatible image, it will be automatically turned into BASE64,
{"image":"data:image/png;base64,
{"image":"data:image/jpeg;base64,
then you will have to “clean” the text from them
@Axelar Wow, this is awesome! That opens up a whole new world, for example if you want to implement a WIKI, a tutorial or a To-do List with images. This replaces exactly the kind of field types, FileMaker is missing. 4D Databases have this extra kind of field type, that can store text, images and I think also hyperlinks.
@weetbicks Thanks, now it works flawlessly. I’m looking forward to implement it now.
Thank you very much, @Axelar for sharing this for free. I tested it and it also looks fantastic.
I’d like to suggest two improvements for your solution:
The “Save” and “Cancel” Buttons are very inconspicuous. I had a hard time finding it the first time I used it. Maybe you want to make them more obvious by making them bigger than the rest or adding some text (OK + Cancel)?
I still miss the possibility to add tables. You can paste them from somewhere else, but you can not add them with a button. That would be awesome!
Others than that I really love this solution.
Edit: I now found out that you use quill.js for the Rich Text Editor. So I guess you probably don’t have any influence on the above mentioned suggestions.
That is the brilliant work of David Wikström (CamelCase Data). I shared that link to show that the community has a rich history of exploring these integrations.
We also stand on the shoulders of pioneers like Otmar Kramis, Rich Text Editor | balimusic who did some of the earliest work on this.
My contribution here is specifically the "Native Bridge" (Translation Engine) to solve the printing/searching and formatting issue.
I’m curious about the role of Gemeni/Claude in the implementation? Were they able to write the “Set” script that parses the JSON output of the editor? Did they produce that script in plain text which you then translated into FileMaker scripting ?
Problem 1 Solved: Users get a full modern editor in WebDirect.
