Backlog Request: WYSIWYG Editor for Front End (User Submitted)

1

So, I have been using front end user submitted Custom Module items quite a bit and more and more I am requiring a WYSIWYG editor for the front end of the site. This has also been requested from our clients.

I have been playing around with some editors and have managed to get one to work, but it is very limiting.

So, would like to request a WYSIWYG editor similar to what we have in the ADMIN pages, but for the front end Custom Module items (perhaps an ability to turn on or off in the Custom Module setting). Also, for clients to be able to upload images via the editor and upload them to our folders we create for them (similar to how the ADMIN is set up).

Of course, I need this, like yesterday… so, hopefully this can be added to the Public Backlog and get this implemented soon (hey, gotta push for these things right - lol)!

Thanks,
Aaron

2

Will vote for that one for sure, just spoke to a potential client with just such a need. Users would submit their business info and pics via custom module and edit it themselves as needed. Just assumed that would be something that could already be done, but sounds like it can’t or at least not easily.

3

I’m using CkEditor (https://ckeditor.com/) for HTML properties in items submitted via front end. Works fine in BC and I hope it works the same way in Treepl as it’s basically just front end JS code which should be fine with any kind of forms. For images I use some lines of JS so the form shows a preview of the image before sending (I can post it here if anyone is interested).
Here is how it looks like:
https://www.loom.com/share/f9846d3c9ea74cba9467bacf2fc30d02

1 Like
4

Thanks @TimL gonna try this out. Yes please, if you have some JS to share, please do so.

5

This is the JS code for previewing images in the form (still with some BC mark-up):

<label for="CAT_Custom_1"><strong>1. Bild<span class="req">*</span></strong></label>
<img class="" id="bild1" src="/haendler/_assets/img/default.jpg?Action=thumbnail&algorithm=fill_proportional&width=250" alt=""  />
<input type="file" name="CAT_Custom_1" id="CAT_Custom_1" class="cat_textbox" onchange="loadFile(event)" />
<script>
 var loadFile = function(event) 	{
 	var output = document.getElementById('bild1');
  	output.src = URL.createObjectURL(event.target.files[0]);
               				 };
</script>

default.jpg in the image tage is the placeholder image when creating a new item; you would want to use this instead on the item edit page:
<img class="" id="bild1" src="{% unless bild1 == '' %}{{bild1}}?Action=thumbnail&algorithm=fill_proportional&width=250{% else %}/haendler/_assets/img/default.jpg?Action=thumbnail&algorithm=fill_proportional&width=250{% endunless %}" alt="" />
So it shows previously uploaded images instead of the placeholder.
Just use different ids instead of bild1 if you’re using more than one image in the form and different variables for the JS function (like loadFile1, loadFile2 etc.).

2 Likes
6

Thanks dude! Appreciate the info.

1 Like
7

Can this be added to the Treehouse website?

8

Sure. @Adam.Wilson how does this work? I can’t publish code snippets on the Treehouse page myself, right?

9

Yeah, not user submitted at the moment.
The code would need to be converted for Treepl and tested. Other than that just send me a bit of a description and any relevant instructions and I’ll put it up.

10

I will have to migrate the BC site I use this code for to Treepl this month anyway. Let me do this, then we see that it works for Treepl (which it should), then I send it over to you, how about that?

2 Likes
11

Sure @TimL. Thank you!

12

I’ve been using TinyMCE on a BC site and it works well, hopefully, it’ll be okay in Treepl. It’s customisable and easy to setup.