Significant Quill WYSIWYG Editor problems (v11)

And I’d add for this that when the marketing folks are editing they need to have a button in the HTML editor to clean all the unrelated stuff (this helps in security too). The needed editing like bold, titles, bullet points are added there and not brought from some other editor or in worst case like Word that inputs all kind of “bad code” in it. So, cleaning is important. Currently the editor when appearing in ERPNext has this cleaning function if people know to use it.

I do not think it is an issue to have HTML and rich Text together. When you make with wysiwyg editor it is so easy to check what the code version has, in case you understand it and instead of trying multiple times all over again, you can just check where it goes wrong. Because believe me, it sometimes goes wrong.
Our dear clients are masters of finding a way to just somehow mess the content but if we can just go and check the code, we can normally fix the issue in no time. A separate editor would not give this chance.

The editor should also save the html code and then interpret that one as wysiwyg. If it is some other version, there is danger it wouldn’t keep the same when re-saving. HTML is master and wysiwyg is slave. :wink:

What you are expecting, is non trivial in 2018. We evaluated a bunch of libraries and did not find anything that could do both well enough. If you think we have missed out something. Please offer a suggestion!

We checked what we’ve been using and I guess most of projects had TinyMCE embedded. Looking its info now, I realise that it actually has more pro version that is not open source / free. Another has been CKEditor that we’ve used.

What I quickly searched online now, Jodit seems quite a great option. But I have not used it embedded in any open source project.

As I understood the ERPNext v 10 editor is still Summernote. It is by many articles one of the most feature rich and free WYSIWYG editors. So, it depends really what we are after. Pretty much similar editor would be also “wysihtml” that I just tested online on their website. What do you think of that?

1 Like

I am not well educated like the others here. The prior editor was far better for editing and creating webpages, which require customer HTML and embeds at times.

We have immediately missed the ability to have an average user embed a youtube video. I am not sure what to tell the marketing guys now about how to do that.

We just noticed after upgrading awesomers.com to version 11 that the embedding mailchimp signup form was no longer working. It was there, however, the submit button wouldn’t work.

The form looked and worked great in the past.

When I went into edit the sign up page (https://www.awesomers.com/join-us) the HTML and form was totally gone only the text remained.

I couldn’t figure out how to embed the mailchimp form so I had to remove the sign up form text and simply encourage visitors to subscribe to the podcast.

My question is 2 fold:

  1. Given that the WYSIWYG editor that was there before gave us more power to edit pages, is there some alternative to getting simple embeds to work on the site that can be used by non-programmers? (marketing type people?)

  2. If there is no alternative has thought been given on the impact to users who want to use the system for hosting a live website?

As always if there is a solution that makes sense I am open to supporting that through enhanced knowledge or paying for upgrades, but I wanted to point out that the user experience on the web hosting is not ideal at the moment. I share this as an effort to help improve - not as a complaint.

3 Likes

POSSIBLE SOLUTION (I hope I can explain this correctly…)

Background: The removal of the Summernote Editor and installation of the Quill Editor has simplified the process of maintaining the editor code and likely makes it more robust to version changes, but it has reduced the number of tools that can be used to customize Web Pages, Web Forms, and other HTML-based fields.

Current Status: As discussed in this post, there is a work-around that exposes an open text field that can take raw HTML and it also creates a “Preview” window where you can see a limited version of what the rendered HTML will look like. But the user must compose raw code (or use a completely separate Editor) and that restricts the number of people that edit/update/create content on the web site.

Our solution: We hired the awesome team at GreyCube to help us restore the ability to edit HTML with a Summernote-like tool. They came back with an app that uses Jodit as the editor and it has been a great solution for us. If you would like to use the app that Greycube built for us, here are the instructions that they gave us:

It can be installed on any site/instance you desire with the below command

One time to get app
bench get-app https://github.com/ashish-greycube/jodit_html_editor

to install app on any instance/site
bench --site [sitename] install-app jodit_html_editor

18 Likes

Wonderful, this is really a crucial tool!

Thanks a lot brother, you have helped a lot

Happy to help. Pass it on!

1 Like

thanks alot but this updated only
Web page
web form
item

i need to use it in terms and conditions for sales orders and quotations ??

1 Like

Exactly my problem. I need this in T&C as I have coded a lot of them and select the needed one in custom script. So I cannot use an html field as the content of this field should need to change depending on a number of conditions.

@jignesh_shah can you speak to the process to allow Jodit to handle additional DocTypes?

In the meantime, this is a general workaround to get Raw HTML into a DocType: Letter Head HTML / Table Setup

Super that is indeed a working work around.

1 Like

Approach is
Hides Text Editor (Quill) field
Creates a new HTML field to render Jodit on doctype UI
Ultimately, stores value in hidden TextEditor field

Inside desk , for doctype it is done for Item doctype > Website Description field
One may fork the app https://github.com/ashish-greycube/jodit_html_editor and extend for the doctypes one is interested in(say Sales Order).

In general one can refer readme for details.

1 Like

We’ve tried to use HTML Editor (in-built one) instead of Quill but we get our texts jumping all over on the lines of text. It decides to take some letters and put them in the end of the whole text. So, a complete mess as a result.

Definitely we need an editor that is user friendly. The real end-users of the ERP won’t know anything about HTML, any other code language and would like to make nice texts, letters, terms etc for their clients.

1 Like

Have you got the solution?, even i am facing same problem.

It’s painfull to use the editor :sweat:

env

ERPNext: v11.1.15 (master)
Frappe Framework: v11.1.15 (master)
Python: 3.6.3

2 Likes

Definitely following this for sure. I was also searching similar and end up on this forum. Also, Hi! I am new to this article forum. Would like to learn and share a lot things in the future.

ERPNext is great. Buggy? Sure. A bit cumbersome to deploy? You bet. Powerful? Absolutely. Unfortunately, this is such a basic “bug” that it is going to make the entire system unusable for so many potential users/clients of the system. It really is a shame as it appears to be a nose cutting exercise.

4 Likes

It’s a tough problem. Supporting users back in the wordpress days, there was the usual tinymce, ckeditor etc.

Users would always break the layout, and need help cleaning it up / fixing stuff. CKEditor got to a certain point where it wasn’t too bad.

I note that wordpress has gone to its gutenburg editor into the fture

Their userbase is absolutely huge, and it may be something to keep an eye on. I remember using it in wordpress 5 when it first came out and it was annoying as a developer, but as an end user, I think it makes more sense for them…

Just something to consider, whereby they are abstracting away the html from the user, to the point where they can’t break it so much and have re-usable component blocks. Kind of similar to the javascript folks with vue and angular 4 and react with re-usable components.

3 Likes