I've largely got QuillJS HTML Editor working with EWB...

It's cool, it supports colours, bold, italics, H1/H2..., Images, HTML links, etc.   Quill a big project, probably many people have contributed, and it's quite mature.  

You can see a demo at: https://erickengelke.com/quilljs/quillsample.html

The code is currently a mess while I try things out.

That's the good news, BUT it's not quite ready...one small hiccup...

My problem has plagued me for the last few hours.  Namely, EWB's mouse handler seems to prevent the QuillJS from getting mouse events.  So you can cursor around and add things, but you cannot position the caret with the mouse pointer.

QuillJS works by replacing a DIV with its JavaScript based editor.

I tried using a TBasicPanel as a Div, but it has its own mouse handler.  I hoped I could chain EWB's mouse handler to the QuillJS handler, but I haven't figured that out yet.

I tried by also creating my own DIV with

 quillfelement :=THTMLCSSElement(CreateHTMLElement('div'));
 quillfelement.id := 'editor';
 AddHTMLElement(GetBodyElement,quillFElement);

but that didn't solve the event handler.  It still doesn't receive mouse events.

If anyone has an idea how to solve this, that would be appreciated.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

erickengelke wrote:

> My problem has plagued me for the last few hours.

I found a unlikely solution to this problem.  

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

"I found a unlikely solution to this problem.  "


Do Share....

Walter

Walter Matte wrote:
>> "I found a unlikely solution to this problem.  "

> Do Share....

I didn't find a simple single solution, but I found that ALL HTML5 browsers but Firefox on any platform support a new function that looks up the editor node under the X,Y pointer location.  And Firefox browsers all support a different but nearly identical function.  Combining the two solutions, I came up with something that works with everything but IE or other dog eared browsers that don't support HTML5.

My usual site is apparently down for maintances, but the current prototype can be seen at:

https://www.eng.uwaterloo.ca/~erick/quill/quillsample.html

complete with a PNG file embedded in the Hypertext.  And support for various fonts, colours, lists and paragraph types added late last night.

Erick

It's still got work to do, but it's coming along well.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

Erick

Are you going to add this to your Nice Components!!!

Walter

Walter Matte wrote:

> Are you going to add this to your Nice Components!!!

Sure will.  I'll announce it on the components forum when it's available.

No  upgrade charge for all existing clients, of course.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

Thank you Erick, really, truely, appreciate this 'Nice' enhancement.

Walter

Good stuff! Looking forward to it.

Trinione wrote:

> Good stuff! Looking forward to it.

If you have the URL to the old library, it's updated with the new functions and the source code to the big sample application.

It has to do some JS trickery to load the CSS because EWB doesn't have a native way to load external CSS.  And of course it loads the  Javascript on the first access (and caches it then onward), but that's all encapsulated pretty well.

Contact me directly if you need help.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com