The WYSIWYG editor is dead. Long live the WYSIWYG editor

We’ve been having a lot of trouble lately with the page editor you use in various places in TroopTrack - it’s been crashing a lot and several of its capabilities are broken. I’ve attached a picture of the editor below in case you don’t immediately recognize what I’m talking about.


We’ve spent a lot of time trying to fix it up and have decided it’s too messed up. Also, the developers of CKEditor have decided to go in a direction that makes it impossible for us to upgrade to newer versions of CKEditor.

As a result, we are going to switch to a different editor, called Trix. You can check out Trix’s features here: https://trix-editor.org/.

Trix is a simpler editor than CKEditor (the old editor we are killing), but it works extremely well, even on mobile devices, and has support for drag and drop inline images and attachments.

Trix is, in most ways, a big improvement over CKEditor. It will allow you to do inline images and attachments in event descriptions, emails, and other places where that wasn’t previously possible. It also is much more reliable, allows us to control the uploaded files better, and is simpler to integrate with TroopTrack.

There is one particular aspect of it that you might not like if you have built a lot of web pages in TroopTrack - Trix will not allow you to resize images. You will need to set the image size before you drag it into your web page. It will also not let you customize the alignment and text wrap properties of Trix. Worse still, if you try to edit a page with resized/wrapped images after the upgrade, you will lose that formatting and will need to replace the images with properly sized images.

We understand this is going to be a pain for some of you. We are sorry about that. Trust us, we did everything we could to get CKEditor to work in our platform.

We plan to release this feature in a few days. In the meantime, please try out the trix editor using the link below.

https://trix-editor.org/

Best wishes,

Dave

I’ve just read their documents, but it appears to concentrate on implementation of the editor on a website. Where can I find a description of the editor’s features for users? Do you have a direct link you can share?

In the meantime… I don’t see anything remotely like a “source” button - please don’t tell me the ability to edit a webpage’s source is going away.

Mike

The Trix features you see in the “try it” section of the page I linked to are all the features.

Trix does not let you edit the source, which is why web pages are the one place where I am reluctant to use Trix. Everywhere else we used CKEditor, Trix is an upgrade. It’s also why I posted this before releasing the change, to see what people freak out about. We might need to do something else for the web pages, but I feel Trix will work for messages, sign up sheets, event descriptions, etc.

I am open to a different editor for web pages, but it needs to be lightweight, easy to integrate, and allow us to control how images are stored.

Check out https://www.tinymce.com/. That could work for web pages and it doesn’t look like it would be horrible in the ways CKEditor was horrible.

Some other editors I am looking at for web pages:


http://alex-d.github.io/Trumbowyg/

I think froala is our favorite so far.

1 Like

Oh I like TinyMCE and Froala, but I agree, Froala is nicer, and it doesn’t hurt that the icons are so similar (not that I’ve compared them all, but I didn’t see anything that didn’t make sense.

Wow. (video embedding!!!)

Thank you.

Thus ends today’s panic.

Mike

2 Likes

Well, I’ve got Froala working in my dev environment. We might release it this weekend.

One of the really nice things I’ve got working is the ability to insert images from your photo albums.

2 Likes

Really looking forward to this! Especially the extra abilities we will get for events and messaging.

Thank you!!

So am I - CKEditor has been a dumpster fire for a few years and it will be awesome to get rid of it. Better still, it’s replacement is really fantastic.

The new editor is live now. Check it out and let us know what you think!

1 Like

The new one is ok - it’s an editor so I’m having trouble getting too excited :slight_smile:

I tried pasting in a photo - it appears in the editor but the first time I did it popped up a messagebox saying “unknown error” (or something like that) just after the upload happened. The photo was there in the editor box but didn’t appear in the email it sent.

The second time I tried it there was no error and it showed in the editor. When I receive the email I can see a marker for where the image should be but it won’t load (Thunderbird and also Gmail web). Looking at the received message HTML it looks like the source isn’t set properly - the image HTML is:

<img class=3D"fr-dib" src=3D"/uploads/tmp/1487912156-4484-0001-5080/blob" style=3D"-ms-interpolation-mode: bicubic; border: 0; display: inline; height: auto; line-height: 100%; max-width: 560px; outline: none; text-decoration: none; width: 300px;" data-status=3D"OK">

Two other things:

  • the editor tries to keep its toolbar at the top of the screen but this fails to account for the black TroopTrack bar. As a result the top row of the toolbar is covered. That means to bold something you have to highlight the text, scroll right back to the top of the email, press bold, scroll back down. Can you adjust it so the top row isn’t covered by the black bar?

  • there doesn’t seem to be a way to do HTML headings (without going to the raw markup). When sending emails I used to make the headings H1 or H2 so they stood out - easier than bolding and making bigger.

That must be frustrating! What browser (and version) and OS are you using?

I don’t see this behavior on Firefox 51, Chrome 56 or IE 10, either in email or web creation, on Windows 7.

Having trouble visualizing this… paste in a screenshot?

Did you go into your browser’s full-screen mode, or the editor’s full-screen mode?

Mike

Win 10 & Chrome.

I’m a little unclear as to which bit you can’t see - I’m assuming it’s the middle issue about the top row of the editor toolbar. This happens when the window is long enough to require scrolling. As the windows scrolls down the editor toolbar moves up until the top row is hidden.

It works ok if I make the editor go full screen. If I make the browser fill screen (F11) it sort of works - the black bar only covers half the top row of toolbar so you can still click on the icons.

I’m creating emails - not web pages.

In this example the editor window is small but the whole page scrolls because the list of possible mailing lists is so long.

Yeah, the source should be a full S3 url… I will check that out.

Pasted images now work - thanks for fixing that.

Scrolling down hiding the top toolbar line is still an issue.

Just pushed a fix for the scrolling issue.

1 Like