<div class="gmail_quote">---------- Forwarded message ----------<br>From: "Ashish Aggarwal" <<a href="mailto:ashish09101998@gmail.com">ashish09101998@gmail.com</a>><br>Date: Mar 26, 2019 2:10 PM<br>Subject: Re: [Sugar-devel] Enquiry Regarding Contribution To Write Activity Project<br>To: "James Cameron" <<a href="mailto:quozl@laptop.org">quozl@laptop.org</a>><br>Cc:  <<a href="mailto:sugar-devel@lists.sugarlabs.org">sugar-devel@lists.sugarlabs.org</a>><br><br type="attribution"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div dir="ltr"><div dir="ltr">Hello James,<br>I went through the mentioned text editors Quill, TinyMCE, CKEditor, webODF as well as SunEditor and Froala.</div><div>Here is result of the search done by me :</div><div><br></div><div><span id="m_6900982492093499264gmail-docs-internal-guid-a64a885a-7fff-0e27-c7f4-9c6ef0f72ccb"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;color:rgb(0,0,0);background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Quill : </span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Quill is a free, open source WYSIWYG editor built for the modern web. It supports all major modern browsers . It has support on stack and github. The major issue I found in it was lack of support for tables. </span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">TinyMCE : It is also open source Licensed under LGPL . It has all major features required for editing the content . It has great </span><span style="font-size:10.5pt;font-family:Arial;color:rgb(0,0,0);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">documentation</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> and an active community. It is not completely free and is API key based.</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">CKEditor : It is also open source and an easy to use rich text editor . It also has large active community. It has some minor cross browser platform issues.</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">WebODF : It is also open source . It has a major drawback the community is not active anymore. </span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Reference - </span><a href="https://github.com/webodf/WebODF/issues/947" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">here</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">.</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">SunEditor : It is also an open source editor. It has all major features required for the project. The major issue is it has a very thin community.</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">I have also contributed to this Editor </span><a href="https://github.com/JiHong88/SunEditor/pull/84" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">here</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">.</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Froala : It is also an open source editor with active and large community . It also has all major features required for the project .It has good documentation and has a very good performance .It is available for all major frameworks. Although it is open source, but the professional support is paid.</span></p><br><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-weight:700;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Conclusion</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">  : I feel the best way moving forward is to create our own purely javascript based rich text editor without  pure reliability on any other text editor. Our editor would take inspiration from these editors in terms of frameworks used and coding style. The major advantage of doing it will be having a high scale of customisation as per the needs of the project. It would be easier to maintain and do changes to it as per our requirements. </span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">I have tried to implement a basic rich text editor with some major features</span><span style="font-size:11pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> </span><a href="https://ashish0910.github.io/Texteditor/index.html" style="text-decoration-line:none" target="_blank"><span style="font-size:11pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">here</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> purely based on HTML/CSS and JS .</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Ref - </span><a href="https://stackoverflow.com/a/6008195" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">https://stackoverflow.com/a/<wbr>6008195</span></a></p><br><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-weight:700;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Export content to printable format</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> : Most major rich text editors</span><span style="font-size:10.5pt;font-family:Arial;background-color:transparent;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> u</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">ses some API or js libraries to convert the data present in PDF format .</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">For example CKEditor and TinyMCE uses </span><span style="font-size:12pt;font-family:Arial;font-weight:700;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> </span><a href="https://www.api2pdf.com/documentation" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;color:rgb(10,144,235);font-weight:700;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">Api2Pdf REST API</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> ( We can also use the same in our custom editor )</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Also npm packages such as  </span><a href="https://www.npmjs.com/package/html-pdf" style="text-decoration-line:none" target="_blank"><span style="font-size:11pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">html-pdf</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> can also solve the problem </span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">There is one more way do implement it using </span><a href="https://github.com/MrRio/jsPDF" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">this</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> </span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-weight:700;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Export content to editable format</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> : Majority of previously existing text editors supports only convert to html format . However we can have export to txt , </span><span style="font-size:10.5pt;font-family:Arial;color:rgb(36,41,46);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Open XML word documents</span><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> , HTML.</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">For txt and HTML : Best way to do this is through </span><a href="https://github.com/eligrey/FileSaver.js/" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">FileSaver.js</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> and </span><a href="https://www.javascripture.com/Blob" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">Blob</span></a></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">A more advanced way would be </span><a href="https://github.com/jimmywarting/StreamSaver.js" style="text-decoration-line:none" target="_blank"><span style="font-size:11.5pt;font-family:Arial;color:rgb(0,89,153);font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">StreamSaver.js</span></a><span style="font-size:11.5pt;font-family:Arial;color:rgb(36,39,41);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> in case of extremely large files ( greater than 2gb ) .</span></p><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11.5pt;font-family:Arial;color:rgb(36,39,41);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">For doc : We can use jquery word export plugin </span><a href="https://codepen.io/airpwn/pen/LRZdJo" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">example</span></a><span style="font-size:11.5pt;font-family:Arial;color:rgb(36,39,41);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> . </span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:11.5pt;font-family:Arial;color:rgb(36,39,41);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">Also we can use </span><a href="https://github.com/kannan-ar/MariGold.OpenXHTML" style="text-decoration-line:none" target="_blank"><span style="font-size:11.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">MariGold.OpenXHTML</span></a><span style="font-size:11.5pt;font-family:Arial;color:rgb(36,39,41);font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> </span></p><br><br><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap">For RTF : We can use </span><a href="http://jsfiddle.net/JamesMGreene/2b6Lc/?utm_source=website&utm_medium=embed&utm_campaign=2b6Lc" style="text-decoration-line:none" target="_blank"><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;text-decoration-line:underline;vertical-align:baseline;white-space:pre-wrap">this</span></a><span style="font-size:10.5pt;font-family:Arial;font-variant-numeric:normal;font-variant-east-asian:normal;vertical-align:baseline;white-space:pre-wrap"> type of approach and Blob to get RTF files</span></p><br><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt">Regards , </p><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><a href="http://ashishaggarwal.tech/" target="_blank">Ashish aggarwal</a></p><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt">github - <a href="https://github.com/ashish0910" target="_blank">ashish0910</a></p><br><br><br><br><br><br><br><br></span></div><div><br></div><div><br></div><div> <br><br></div></div><br><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, 26 Mar 2019 at 03:57, James Cameron <<a href="mailto:quozl@laptop.org" target="_blank">quozl@laptop.org</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Welcome.<br>
<br>
Third step was to make a study of existing web editors, identifying<br>
features of each and ways to export content to editable or printable<br>
format.  What were your results?<br>
<br>
On Mon, Mar 25, 2019 at 09:25:18PM +0530, Ashish Aggarwal wrote:<br>
> Hello everyone ,<br>
> I came across the project Write Activity for Sugarizer [1]here . I really liked<br>
> the project and would like to contribute to it for gsoc but as the existing<br>
> project is based on python and the proposed project is required to be made on<br>
> javascript, as mentioned in the ideas page, I was not sure regarding the right<br>
> way towards contributing to this project.<br>
> I have already gone through the provided tutorials as well as the steps<br>
> mentioned and have been contributing towards Sugar Labs for a while now.<br>
> Please provide me the right approach going forward.<br>
> Thanks & Regards<br>
> [2]Ashish Aggarwal<br>
> Github Link -  [3]ashish0910<br>
> <br>
> References:<br>
> <br>
> [1] <a href="https://github.com/sugarlabs/GSoC/blob/master/Ideas-2019.md#write-activity-for-sugarizer" rel="noreferrer" target="_blank">https://github.com/sugarlabs/<wbr>GSoC/blob/master/Ideas-2019.<wbr>md#write-activity-for-<wbr>sugarizer</a><br>
> [2] <a href="http://ashishaggarwal.tech/" rel="noreferrer" target="_blank">http://ashishaggarwal.tech/</a><br>
> [3] <a href="https://github.com/ashish0910" rel="noreferrer" target="_blank">https://github.com/ashish0910</a><br>
<br>
> ______________________________<wbr>_________________<br>
> Sugar-devel mailing list<br>
> <a href="mailto:Sugar-devel@lists.sugarlabs.org" target="_blank">Sugar-devel@lists.sugarlabs.<wbr>org</a><br>
> <a href="http://lists.sugarlabs.org/listinfo/sugar-devel" rel="noreferrer" target="_blank">http://lists.sugarlabs.org/<wbr>listinfo/sugar-devel</a><br>
<br>
<br>
-- <br>
James Cameron<br>
<a href="http://quozl.netrek.org/" rel="noreferrer" target="_blank">http://quozl.netrek.org/</a><br>
______________________________<wbr>_________________<br>
Sugar-devel mailing list<br>
<a href="mailto:Sugar-devel@lists.sugarlabs.org" target="_blank">Sugar-devel@lists.sugarlabs.<wbr>org</a><br>
<a href="http://lists.sugarlabs.org/listinfo/sugar-devel" rel="noreferrer" target="_blank">http://lists.sugarlabs.org/<wbr>listinfo/sugar-devel</a><br>
</blockquote></div></div>
</blockquote></div>