The shift from Summernote to Quill as the WYSIWYG editor on web pages has caused two significant problems.
Overwrite: Making any change to an existing page with Quill causes the entire page to be re-written in Quill and the results can be terrible. I had a great looking page that we built in Summernote. It looked great and worked fine after we moved from v10 to v11. I wanted to add 2 rows to a table and used Quill to “Insert a row” and it wiped out the background image, table format, and seemed to loose all references to our CSS.
Raw Edits: I say that it “seemed” to loose all references because I cannot see the raw HTML. In Summernote we could go in and make changes and it all saved nice and clean. With Quill there is no “Code view” so we cannot make changes and we cannot see what is actually in the page.
Ok so it looks like quill is not designed to be used as an web editor for HTML layouts. We need a richtext editor to create and edit E-mail templates. It doesn’t look like quill allows for div elements… Delete.
If it is true that Quill “cleans” out DIV tags, I don’t understand how it is useful as a web page editor.
Can anyone set me straight on this? Is Summernote so bad that we can’t have it (at least on the web pages)?
I went to Customize Form and changed to HTML Editor. But in reality, it is just a text box that will accept HTML and generate a Preview in the section below.
Is there no way to get back to Summernote so that everyday users can make edits to HTML pages?
@MichaelPinkowski this is a tough call. Ideally there are 2 types of editing
Rich Text (without custom HTML)
HTML
Trying to have both is a sub-optimal solution for both the use cases. In 90% of the use-case, people use rich text (like email, comments etc). Even this editor in discuss is just rich text not HTML.
The problem is that summernote did not care, and hence the expectation was to do both in one. This is usually not a good idea (and also has security issues, like someone pasting malicious javascript embedded in the HTML / SVG).
We should upgrade the HTML editor with the code editor (Ace) and also add a preview button. (like we did with Markdown)
I will add this to our next sprint, but want to set the expectations clear.
Use case. I think that Ecommerce is going to be a bigger and bigger part of ERPNext. The brains of a company will still be in its Accounting, SupplyChain, BOMs etc. But the FACE of the company will be on its Home page, Item pages, White papers, etc. Those pages are the ones that need more than Rich Text can provide. They need HTML that non-coders (marketing dudes and dudettes) can build, update, and promote. A WYSIWYG editor makes it possible for people with basic skills to quickly contribute content to the web site. WYSISYG + code view makes it possible for really beautiful web sites (powered by ERPNext).
That is my best explanation. Thanks for the opportunity.
WYSIWYG editors are very difficult to maintain. That’s why we decided to do 2 controls. I think there are a lot of WYSIWYG editors out there which even allow you to export HTML which can directly be pasted into ERPNext’s HTML editor.
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.
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?
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.
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:
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?)
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.
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
