What you see is what you get - enter Froala

When needing to add a bit of WYSIWYG into a web application I've always gone with the stalwart TinyMCE. It does the job, it's configurable with regards to what you allow in your elements and generally users use it without too much trouble.

We just had a few issues that were annoying with TinyMCE so we went on a hunt for a new editor to use in its place. A colleague recommended Froala as he had recently evaluated it for another project.

We use angular extensively (and had to write a directive for TinyMCE integration) so I was expecting to have to do the same for Froala. Not so! They already have a directive for angular available on GitHub.

It took approximately 5 minutes to go from TinyMCE to basic Froala. It took another day or so to get all the functionality we wanted - that includes creating APIs for image and file upload.

Things I really like about Froala:

  • Good documentation
  • It seems to produce better html than TinyMCE did (fewer random <p> tags!)
  • Pasting images (for upload) is such a great feature to have
  • Image/file upload easy to wire up
  • It works well, even on IE8!
  • It looks awesome - even on a mobile
We also think the inline version of the editor will enable us to implement some great new functionality in other places. I'll write another blog post with the code for the file and image upload action methods (including code for scaling images) for ASP.Net MVC.

Comments

Post a Comment

Popular posts from this blog

Trimming strings in action parameters in ASP.Net Web API

In standard MVC it's very easy to create a model binder to trim all of the strings passed into action methods. The approach I used for that was from here:  http://blogs.taiga.nl/martijn/2011/09/29/custom-model-binders-and-request-validation/ . It works well and it trims the properties of models too. The problem came when I tried to do the same thing for Web API. I added a similar StringTrimmingBinder and registered it as a service using the very non-discoverable API: var provider = new SimpleModelBinderProvider( typeof ( string ),  new StringTrimmingModelBinder()); GlobalConfiguration.Configuration.Services.Insert( typeof (ModelBinderProvider),  0,  provider); As a side note, I have no idea how you're supposed to find out how to register a model binder without opening up Bing and Googling it. Anyway, this worked great when the parameters to the action were actually strings but doesn't work with complex types as parameters. Now, I've n
Read more

Full text search in Entity Framework 6 using command interception

Image
Background One of the main problems we encountered using Entity Framework was its lack of support for full text search. Our search function is based around a series of processors that attempt to match the incoming phrase against a set of patterns that we're expecting (10+). For example, there's one for dates and times, recent financial quarters as well as more domain specific ones. Everything is cached and so is really fast, except when it isn't: Here's the monitoring chart for our SQL DB in Azure That's a spike to 100% resource utilisation because we fall through to a phrase search as a last resort (which cannot be cached) - it's exceedingly rare but it still hurts. Before EF, the app used full text search and it was one of the casualties when the app was migrated to EF4 several years ago. The lack of full text search has been getting more and more painful as the amount of data has grown. We really needed full text search back... Command intercept
Read more

Composing Expressions in C#

This post follows on from  Reusing predicates in Entity Framework . In my previous post I introduced the "and" extension method which allowed me to create a new entity framework safe expression from two existing expressions. Here's how we make that happen: The code is from a blogpost from Colin Meek from 2008:  InvocationExpression and LINQ to Entities . I'll just dump my version of the code here. The idea is exactly the same (even using the visitor as an immutable stack): public class InvocationExpander : ExpressionVisitor { private readonly ParameterExpression _parameter; private readonly Expression _expansion; private readonly InvocationExpander _previous; public static T Expand<T>(T expr) where T : LambdaExpression { return (T) new InvocationExpander().Visit(expr); } public InvocationExpander() { } private InvocationExpander(ParameterExpression parameter, Expression expansion, Invocati
Read more