You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by anam <ic...@gmail.com> on 2021/03/03 18:36:26 UTC
using externall javascript libraries (quilljs rich text editor)
Dear All,
does anyone ever implement quilljs rich text editor in royale ?
I have looked at hljs and ACE editor in the royale example folder.
I am trying to start with this code, but how to put the editor to royale ui?
i am using jewel.
https://pastebin.com/dyidT1K3 <https://pastebin.com/dyidT1K3>
I now in the hljs example does not contain ui part, just a function.
And in the ACE Editor example is already using provided swc.
Thank you.
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Harbs <ha...@gmail.com>.
You can just use UIBase (or Group) instead of UIComponent.
> On Mar 8, 2021, at 7:29 PM, anam <ic...@gmail.com> wrote:
>
> Thank you Yishay, This is very help full.
> can you please provide for using with jewel ?
>
> The Quill Class is working, but when i compile SMQuillEditor an error
> raised:
> Type was not found or was not a compile-time constant: UIComponent
>
> Best Regards,
>
>
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Yishay Weiss <yi...@hotmail.com>.
As Harbs said, replace UIComponent with UIBase and it should work. Also, replace https://cdn.quilljs.com/1.3.6/quill.js with https://cdn.quilljs.com/1.3.6/quill.min.js
________________________________
From: anam <ic...@gmail.com>
Sent: Monday, March 8, 2021 5:29 PM
To: dev@royale.apache.org <de...@royale.apache.org>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Thank you Yishay, This is very help full.
can you please provide for using with jewel ?
The Quill Class is working, but when i compile SMQuillEditor an error
raised:
Type was not found or was not a compile-time constant: UIComponent
Best Regards,
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by anam <ic...@gmail.com>.
Thank you Yishay, This is very help full.
can you please provide for using with jewel ?
The Quill Class is working, but when i compile SMQuillEditor an error
raised:
Type was not found or was not a compile-time constant: UIComponent
Best Regards,
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Yishay Weiss <yi...@hotmail.com>.
Yes, nice idea.
________________________________
From: Andrew Wetmore <co...@gmail.com>
Sent: Monday, March 8, 2021 9:25 PM
To: Apache Royale Development <de...@royale.apache.org>; yishayjobs@hotmail.com <yi...@hotmail.com>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
@Yishay, would you consider giving a presentation at ApacheCon 2021 on using external JS libraries with a Royale app? Since you have a running example, you are halfway done with preparing your talk!
Andrew
On Mon, Mar 8, 2021 at 5:53 AM Yishay Weiss <yi...@hotmail.com>> wrote:
I got something working for my app and the emulation components with these 2 classes
<https://cdn.quilljs.com/1.3.6/quill.snow.css>
package components
{
import mx.core.UIComponent;
public class SMQuillEditor extends UIComponent
{
public function SMQuillEditor()
{
super();
}
private var subComponent:UIComponent;
private var quill:Quill;
override public function addedToParent():void
{
super.addedToParent();
if (!subComponent)
{
subComponent = new UIComponent;
subComponent.percentWidth = 100;
addElement(subComponent);
quill = new Quill(subComponent.element, {"theme": "snow"});
}
}
}
}
and
package
{
/**
* @externs
*/
public class Quill
{
/**
* <inject_script>
* var script = document.createElement("script");
* script.setAttribute("src", "https://cdn.quilljs.com/1.3.6/quill.js");
* document.head.appendChild(script);
* var link = document.createElement("link");
* link.setAttribute("rel", "stylesheet");
* link.setAttribute("type", "text/css");
* link.setAttribute("href", "https://cdn.quilljs.com/1.3.6/quill.snow.css");
* document.head.appendChild(link);
* </inject_script>
*/
public function Quill(element:*, config:*){}
}
}
Hope this helps.
________________________________
From: Yishay Weiss <yi...@hotmail.com>>
Sent: Sunday, March 7, 2021 7:22 AM
To: dev@royale.apache.org<ma...@royale.apache.org> <de...@royale.apache.org>>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Check out TinyEditor as well in the mx package.
________________________________
From: anam <ic...@gmail.com>>
Sent: Friday, March 5, 2021 7:30 PM
To: dev@royale.apache.org<ma...@royale.apache.org> <de...@royale.apache.org>>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Great, i think it will be very help full :)
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
--
Andrew Wetmore
http://cottage14.blogspot.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Andrew Wetmore <co...@gmail.com>.
@Yishay, would you consider giving a presentation at ApacheCon 2021 on
using external JS libraries with a Royale app? Since you have a running
example, you are halfway done with preparing your talk!
Andrew
On Mon, Mar 8, 2021 at 5:53 AM Yishay Weiss <yi...@hotmail.com> wrote:
> I got something working for my app and the emulation components with these
> 2 classes
>
> <https://cdn.quilljs.com/1.3.6/quill.snow.css>
> package components
> {
> import mx.core.UIComponent;
> public class SMQuillEditor extends UIComponent
> {
> public function SMQuillEditor()
> {
> super();
> }
>
>
> private var subComponent:UIComponent;
> private var quill:Quill;
> override public function addedToParent():void
> {
> super.addedToParent();
> if (!subComponent)
> {
> subComponent = new UIComponent;
> subComponent.percentWidth = 100;
> addElement(subComponent);
> quill = new Quill(subComponent.element, {"theme": "snow"});
> }
> }
> }
> }
>
> and
>
> package
> {
> /**
> * @externs
> */
> public class Quill
> {
> /**
> * <inject_script>
> * var script = document.createElement("script");
> * script.setAttribute("src", "https://cdn.quilljs.com/1.3.6/quill.js");
> * document.head.appendChild(script);
> * var link = document.createElement("link");
> * link.setAttribute("rel", "stylesheet");
> * link.setAttribute("type", "text/css");
> * link.setAttribute("href", "https://cdn.quilljs.com/1.3.6/quill.snow.css
> ");
> * document.head.appendChild(link);
> * </inject_script>
> */
> public function Quill(element:*, config:*){}
>
> }
> }
>
> Hope this helps.
>
> ________________________________
> From: Yishay Weiss <yi...@hotmail.com>
> Sent: Sunday, March 7, 2021 7:22 AM
> To: dev@royale.apache.org <de...@royale.apache.org>
> Subject: Re: using externall javascript libraries (quilljs rich text
> editor)
>
> Check out TinyEditor as well in the mx package.
> ________________________________
> From: anam <ic...@gmail.com>
> Sent: Friday, March 5, 2021 7:30 PM
> To: dev@royale.apache.org <de...@royale.apache.org>
> Subject: Re: using externall javascript libraries (quilljs rich text
> editor)
>
> Great, i think it will be very help full :)
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
--
Andrew Wetmore
http://cottage14.blogspot.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Yishay Weiss <yi...@hotmail.com>.
I got something working for my app and the emulation components with these 2 classes
<https://cdn.quilljs.com/1.3.6/quill.snow.css>
package components
{
import mx.core.UIComponent;
public class SMQuillEditor extends UIComponent
{
public function SMQuillEditor()
{
super();
}
private var subComponent:UIComponent;
private var quill:Quill;
override public function addedToParent():void
{
super.addedToParent();
if (!subComponent)
{
subComponent = new UIComponent;
subComponent.percentWidth = 100;
addElement(subComponent);
quill = new Quill(subComponent.element, {"theme": "snow"});
}
}
}
}
and
package
{
/**
* @externs
*/
public class Quill
{
/**
* <inject_script>
* var script = document.createElement("script");
* script.setAttribute("src", "https://cdn.quilljs.com/1.3.6/quill.js");
* document.head.appendChild(script);
* var link = document.createElement("link");
* link.setAttribute("rel", "stylesheet");
* link.setAttribute("type", "text/css");
* link.setAttribute("href", "https://cdn.quilljs.com/1.3.6/quill.snow.css");
* document.head.appendChild(link);
* </inject_script>
*/
public function Quill(element:*, config:*){}
}
}
Hope this helps.
________________________________
From: Yishay Weiss <yi...@hotmail.com>
Sent: Sunday, March 7, 2021 7:22 AM
To: dev@royale.apache.org <de...@royale.apache.org>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Check out TinyEditor as well in the mx package.
________________________________
From: anam <ic...@gmail.com>
Sent: Friday, March 5, 2021 7:30 PM
To: dev@royale.apache.org <de...@royale.apache.org>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Great, i think it will be very help full :)
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Yishay Weiss <yi...@hotmail.com>.
Check out TinyEditor as well in the mx package.
________________________________
From: anam <ic...@gmail.com>
Sent: Friday, March 5, 2021 7:30 PM
To: dev@royale.apache.org <de...@royale.apache.org>
Subject: Re: using externall javascript libraries (quilljs rich text editor)
Great, i think it will be very help full :)
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by anam <ic...@gmail.com>.
Great, i think it will be very help full :)
--
Sent from: http://apache-royale-development.20373.n8.nabble.com/
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi,
We are using Jodit editor - I will show you tomorrow how we are doing it. -
Maybe it will be helpful here.
Thanks,
Piotr
On Wed, 3 Mar 2021 at 23:21, Harbs <ha...@gmail.com> wrote:
> This is the first I’m hearing of Quill. It looks pretty cool.
>
> It looks like Quill can take an element, so you should be able to use any
> UIBase or Royale component which uses a Div and just do something like this:
>
> var editor = new Quill(myUIBase.element,options);
>
> > On Mar 3, 2021, at 8:36 PM, anam <ic...@gmail.com> wrote:
> >
> > Dear All,
> > does anyone ever implement quilljs rich text editor in royale ?
> > I have looked at hljs and ACE editor in the royale example folder.
> >
> > I am trying to start with this code, but how to put the editor to royale
> ui?
> > i am using jewel.
> >
> > https://pastebin.com/dyidT1K3 <https://pastebin.com/dyidT1K3>
> >
> > I now in the hljs example does not contain ui part, just a function.
> > And in the ACE Editor example is already using provided swc.
> >
> >
> > Thank you.
> >
> >
> >
> >
> >
> > --
> > Sent from: http://apache-royale-development.20373.n8.nabble.com/
>
> --
Piotr Zarzycki
Re: using externall javascript libraries (quilljs rich text editor)
Posted by Harbs <ha...@gmail.com>.
This is the first I’m hearing of Quill. It looks pretty cool.
It looks like Quill can take an element, so you should be able to use any UIBase or Royale component which uses a Div and just do something like this:
var editor = new Quill(myUIBase.element,options);
> On Mar 3, 2021, at 8:36 PM, anam <ic...@gmail.com> wrote:
>
> Dear All,
> does anyone ever implement quilljs rich text editor in royale ?
> I have looked at hljs and ACE editor in the royale example folder.
>
> I am trying to start with this code, but how to put the editor to royale ui?
> i am using jewel.
>
> https://pastebin.com/dyidT1K3 <https://pastebin.com/dyidT1K3>
>
> I now in the hljs example does not contain ui part, just a function.
> And in the ACE Editor example is already using provided swc.
>
>
> Thank you.
>
>
>
>
>
> --
> Sent from: http://apache-royale-development.20373.n8.nabble.com/