Tiny MCE editor

Show and Tell
1

While Anvil Extras already has a Quill component that works similarly, I found various problems with it. The problem wasn’t the wonderful Anvil Extras team of course but rather the editor itself.

Instead, I decided to use the Tiny MCE editor for my project which I found a lot better than Quill. Many of the features in Tiny MCE editor are paid but the free plan has all the basic features from Quill.

https://anvil.works/build#clone:DJZU7NAJ3LSZQTU4=2APSA4OTWMADEHHDSC7I5BC7

This dependency will allow you to use Tiny MCE in your Anvil app and has support for getting or setting HTML, word count, character count and changing the settings of your Tiny MCE editor(setting font size, colour, dark/light theme, toolbars, plugins and menubar and an event upon change(couldn’t figure out how to call the on_change function from Anvil so decided to build my own using Timer)

Please note that you will have to create an account on Tiny MCE and replace

<script src="https://cdn.tiny.cloud/1/{api_key}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

with your API key.

You can also find informations about Plugins on the offical Tiny MCE website

If you need any further help, feel free to help (although I myself am new to Javascript and utilised the most basic functions)

5 Likes
2

Hi, what did you use for a domain name?

3

Your public url of course

4

D’oh! Should have thought of that. Thanks! You are right. this works really well for free.

5

You’re welcome. Tell me if you need any more help

6

Another dumb question. Are you saving your output to a file or a database table? I am using the TinyMCE form as a component in an app. The app I am using in the News Aggregator app in the tutorials.
I replaced the text area with the TinyMCE form. I renamed the component to content_box which was the name of the text area. I created a text data binding and set it to the content column in the data table.
But I am obviously missing something because the every is saved to the database except what is in the TinyMCE component,
Any thoughts? Here is a clone.
https://anvil.works/build#clone:R422NZ4Z7YROHZVH=CIHWYKB4Y2SZSAZEAZZ4LANJ

Thank you.

7

I was unable to run this app due to being on the free plan. Can you please share a demo app with me which only focuses on your particular issue so that I will be able to run it as well.

Also, what exactly are you trying to do with the tiny mce editor? By the way, there are two methods in Tiny MCE. One is gettext and one is get_html. Get text only returns the text of TinyMCE while get_html returns html. I noticed that you haven’t used the get_html method anywhere. Was this the reason behind your problem?