Quill.js Product Description WYSIWYG Editor

[jraiche 1]

This thread is for answering questions about the Quill.js product description addon, at http://addons.oscommerce.com/info/9319.

Please note that this is for the addon only, I am not a quill developer, so I may not be able to answer questions about the inner workings of Quill.

[tgely 262]

Hi,

 

what about <h> tags?

[jraiche 1]

Quill does not currently support <h#> tags, per https://github.com/quilljs/quill/issues/111. It looks like support is coming.

 

Font sizes are supported though.

[jeannie 1]

Hi  Josiah

 

Your WYSIWYG contribution is exact what I need.

 

Unfortunatelly, I'm not able to get it running. My store, quite new, runs 4 languages and categories.php list all 4 languages correctyl, but any instance of editor shows other errors.

 

Is there anything I have overseen?

 

 

[jeannie 1]

Hi Josiah

 

I altered my categories.php to one language only. Works perfect.

 

Though I need four languages. Any hint how to instantiate?

 

Thx

[bcwright 11]

Hi. The problem is obviously caused by the re-use of the ID numbers, since a simpleminded cut and paste of this code will duplicate them throughout the web page if you have multiple textareas which use the quilljs editor and you don't modify them for each textarea and its associated toolbar and editor. HTML ID numbers need to be unique within each web page.

 

However the problem is relatively easy to solve, and based on Josiah's code for calling quilljs I have implemented a drop-in replacement for tep_draw_textarea_field() which requires only including the new function at the beginning of any pages where you want to use it, and then changing any of the tep_draw_textarea_field() calls that you want to replace into tep_draw_jquill_field() calls. The parameter lists are the same, which simplifies the conversion, and if quilljs is not available it reverts to tep_draw_textarea_field(). Additionally I have added the code to allow images to be embedded in the rich text area (but you'll have to upload them separately and put a link to the image source since there is no upload support). It should be safe to use on both the admin and the customer side of the shop.

 

The current version still uses the links to quilljs.com; if you use it on your site you might want to consider the trade-offs of continuing to use their site or moving the Javascript and css code to your own site. Obviously moving them to your own site means that you'll have to serve up the code yourself, which could take up bandwidth (the files are about 400k) and you wouldn't get any updates unless you downloaded the quilljs code again from their site, but on the other hand you're insulated from any new bugs that might get introduced or from their site going down in the future.

 

Even better, this should work with virtually any version of osCommerce that still uses the tep_* functions, so it isn't restricted to 2.3.

 

This looks like a great way to avoid all of the problems with the Htmlarea contributions, which apparently don't work on a lot of modern browsers (although I haven't tried them out).

 

I am putting all of this together into a contribution that I will add to Josiah's quilljs contribution thread.

 

Bruce

[jraiche 1]

@@Bruce,

 

Great work. I hadn't considered multilingual support, but as you discovered, the plugin is pretty easy to use. Sorry I didn't get back to you sooner, haven't been on the forums in about a month. It's a very nice plugin, and you mention several good points to consider.

 

For ease of installation, I figured that using their hosting would be fine, and potentially faster than hosting it yourself depending on location. But that's a trade off each user can balance.

[jeannie 1]

Just implemented in categories.php replacing tep_draw_textarea_field()

 

Works great. 1A+

 

Thanks for the help. Great contribution.

 

 

 

 

[jeannie 1]

Dear All

 

On a sudden, quilljs does not work.

 

It falls back to the standard text input, as foreseen for a malfunction of quilljs. I did not make any changes to any .php file.

 

Does anybody have an idea, a hint?

 

Thank you.

[bcwright 11]

On 12/14/2015 at 9:45 AM, jeannie said:

On a sudden, quilljs does not work.

It falls back to the standard text input, as foreseen for a malfunction of quilljs. I did not make any changes to any .php file.

The problem with the Quill.js contribution was that apparently quilljs.com deleted the old version of the Javascript from their site, resulting in a broken link. :(

I've uploaded a new version that should fix that problem and also upgraded it to the latest version (from 0.19.10 to 1.3.6), which supports things like header levels, block quotes, and hanging indents.

I'd caution that there are risks with using any HTML editor on any public-facing part of your site (including but not limited to product reviews etc); many of them have serious vulnerabilities such as cross-site scripting and so forth. Quilljs attempts to clean the HTML to avoid at least the worst vulnerabilities, but who knows if they've plugged all the possible holes. A lot of other Javascript-based HTML editors out there have known vulnerabilities and shouldn't be used on client-facing sites, but you should be able to use most of them safely in the Admin area.

Bruce