Base solution for your next web application
Open Closed

Recommendations for rich text editor and file uploader #1632


User avatar
0
moustafa created

Hello everyone i read on your road map that your are going to provide the system with a basic cms and i wondering which text editor you are planning to use

can you please recommend for me a rich text editor to use in my spa application that support image uploading and has many properties to set to uploaded images also i need a file uploader that support multiple files


10 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    We didn't really investigated those tools.

    But after a quick search, it seems like it's hard to find a wysiwyg editor for anuglar which supports file upload. Probably you will need to use jquery or pure javascript editors. This one seems nice to me <a class="postlink" href="https://github.com/quilljs/quill/">https://github.com/quilljs/quill/</a>

    For file upload this one seems nice as well <a class="postlink" href="https://github.com/danialfarid/ng-file-upload">https://github.com/danialfarid/ng-file-upload</a>.

    But as I said, we haven't tried these libraries. I suggest you to take a closer look at these libraries before using it if they meet your needs.

  • User Avatar
    0
    paddyfink created

    You can check those:

    • CKEditor
    • TinyMCE
    • Kendo ui text editor

    All of them support file uplodading. Currently I'm using CKEditor but I plan to switch to TinyMCe because they natively support uploading to azure storage via a plugin

  • User Avatar
    0
    affern created

    Hello

    Are these editors still recommended for use?

    • CKEditor
    • TinyMCE
    • Kendo ui text editor

    Or does anyone have a better suggestion?

    I tried to install Summernote but I did'nt get it to work. I can see that Metronic use this: <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_1/components_editors.html">http://keenthemes.com/preview/metronic/ ... itors.html</a>

  • User Avatar
    0
    alirizaadiyahsi created

    Hi @affern,

    Summernote is using in asp.net zero project. There is an example in DepoUIComponent.cshtml

  • User Avatar
    0
    affern created

    <cite>alirizaadiyahsi: </cite> Hi @affern,

    Summernote is using in asp.net zero project. There is an example in DepoUIComponent.cshtml

    I can't find this example in the asp.net zero project.

    I have tried to follow the steps described here: <a class="postlink" href="https://github.com/vrudikov/ng4-summernote">https://github.com/vrudikov/ng4-summernote</a>, but I'm not able to get it to work in the asp.net zero project.

  • User Avatar
    0
    aaron created
    Support Team

    @affern Summernote is used in MVC project's _Editor.cshtml.

    PrimeNG Editor is now used in Angular project's demo-ui-editor.component.html as of Aug 2017. The suggestions above were made before that.

  • User Avatar
    0
    affern created

    <cite>aaron: </cite> @affern Summernote is used in MVC project's _Editor.cshtml.

    PrimeNG Editor is now used in Angular project's demo-ui-editor.component.html as of Aug 2017. The suggestions above were made before that.

    Thank you :) This works fine. Happy new year!! ;)

  • User Avatar
    0
    aaron created
    Support Team

    That's great. Happy new year :)

  • User Avatar
    0
    affern created

    Do you know how to set maxlength on the PrimeNG Editor?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Seems like no answer to that question <a class="postlink" href="https://github.com/primefaces/primeng/issues/5794">https://github.com/primefaces/primeng/issues/5794</a>. I couldn't find anything in the documentation as well.

    You can register to it's <a class="postlink" href="https://github.com/primefaces/primeng/blob/master/src/app/components/editor/editor.ts#L70">https://github.com/primefaces/primeng/b ... tor.ts#L70</a> event and check the length manually.