This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)

Complete Froala tutorial here: • React Tutorial: Create...
Check out the Froala website: tinyurl.com/ByteGradFroala
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (React + Next.js course out soon!): email.bytegrad.com
⏱️ Timestamps:
0:00 Text & Content Editing in React with Froala
1:57 Simple Froala demo example
4:31 Customizing toolbar
6:51 Adding images
8:00 Character counter
8:47 Events
9:50 Auto-save (local storage)
14:30 Markdown
15:19 Code Mirror
15:34 Custom plugins
15:40 TypeScript support
15:57 Content preview component (FroalaEditorView)
#webdevelopment #programming #coding

Пікірлер: 58

  • @ByteGrad
    @ByteGrad7 ай бұрын

    I highly recommend to check out the complete Froala tutorial here: kzread.info/dash/bejne/eGdn2ryQiM-pddI.html Check out the Froala website here: tinyurl.com/ByteGradFroala

  • @electroheadfx
    @electroheadfx7 ай бұрын

    I had a Froala Text Editor license for a time, never updated to it, the licence price are too much expansive !

  • @raymondmichael4987

    @raymondmichael4987

    7 ай бұрын

    Thanks for the heads up buddy, you saved me 18 minutes of watching this video 😊

  • @mahdimotallebi7207

    @mahdimotallebi7207

    7 ай бұрын

    😁😁😁😁@@raymondmichael4987

  • @jarnoojasaar
    @jarnoojasaar5 ай бұрын

    Inline editor is a very good feature for front end editing, wow

  • @jeremydiaz6494
    @jeremydiaz64947 ай бұрын

    One thing I find confusing about NextJS is it's server side rendering. From what I understand is that React or JS is a single-threaded operation meaning only using one computer core. So you deploy backend services like GraphQL or NodeJS so you utilized 1 core for frontend operations and GQL or NodeJS will utilize their servers as a separate process. How does NextJS compare to an app that is is using GraphQL or NodeJS for their API connections to Databases?

  • @nickderaj
    @nickderaj7 ай бұрын

    This is great - does it support youtube vid uploads directly into the "blog"?

  • @pete531
    @pete5317 ай бұрын

    Wow, this is great, im gonna build something simple just to get my hands busy with this

  • @pixyoutube538
    @pixyoutube5387 ай бұрын

    Thank you😊

  • @maskman4821
    @maskman48217 ай бұрын

    Awesome tutorial 🤩

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Thank you 😁

  • @darelbvcr687
    @darelbvcr6877 ай бұрын

    Can I use server actions with this text editor to create post req etc ?

  • @nickbubuioc
    @nickbubuioc7 ай бұрын

    Thnkas for the videos, waiting for your react + nexjs course

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Coming soon! 😉

  • @john_dren
    @john_dren7 ай бұрын

    Could you make a video on your philosophy and more specifically your decision making process when it comes to creating a project. In other words, when you choose to use existing features such as this Froala Text Editor vs when you choose to build your own features from scratch?

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Great idea

  • @hlugdandukka
    @hlugdandukka7 ай бұрын

    Is there not an open source library, react-markdown or something that does all of that?

  • @murilodemeloreis3175
    @murilodemeloreis31753 ай бұрын

    How to edit the text written in Froala editor with the same formats, that was later stored in db?

  • @ethaneth6481
    @ethaneth64816 ай бұрын

    the example that you provided in the next.js starter has styles totally misplaced, how to fix it?

  • @zunnoorainrafi5985
    @zunnoorainrafi59857 ай бұрын

    Hi Byte! Please also add pagination, infinite scrolling and filtering in your Nextjs course

  • @7doors847
    @7doors8477 ай бұрын

    Nice nice nice!!🔥

  • @vanithb6630
    @vanithb66307 ай бұрын

    Can you make video use effect depending array warning error

  • @webdevpersion
    @webdevpersion7 ай бұрын

    Hello sir I am working on project where I get user profile in next js but i don't know where to store the image I am from Afghanistan and in our country cloudinary is not available I used firebase storage but it takes 30s to upload image and give me the image url what should I do please give me some instruction 😢😢❤

  • @movietime8403
    @movietime84036 ай бұрын

    Can I give specific id to h1 tags in this text editor?

  • @maheshadusumilli7833
    @maheshadusumilli78337 ай бұрын

    Hi @ByteGrad, Will you be adding Tailwind CSS for Professional CSS course present in Udemy?

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Yes

  • @maxtsh
    @maxtsh7 ай бұрын

    Awesome

  • @joaoarthurbandeira
    @joaoarthurbandeiraАй бұрын

    Hey, could you show us how to implement QuillJs (not react quill, i find that quilljs is more versatile and has more things you can do with) with Nextjs and how to dynamic import it with no ssr (since it uses the 'window' api) and initialize it into a page? It would be really cool to see a sort of "document automation platform" with templates and documents, so we can create templates with variables, save it into the editor with custom blots, create a document and insert those templates and finally save it all to the database. And (if i may abuse it, hahah), a bonus as well could be saving it to localhost so we can persist our text even before saving it into the database. Many thanks!!

  • @sardor_tech
    @sardor_tech7 ай бұрын

    awesome

  • @smoothoperatah
    @smoothoperatah28 күн бұрын

    my favorite ASMR developer

  • @Foused87
    @Foused877 ай бұрын

    How much for next js course?

  • @juniorsemerzier660
    @juniorsemerzier6607 ай бұрын

    Sir !, Could you make a video about how to generate PDF file from server action?

  • @pastuh
    @pastuh7 ай бұрын

    When new course? It will be available in Udemy?

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    October 31! Only available on ByteGrad.com - make sure you’re subscribed to the email list

  • @somebody-17546
    @somebody-175467 ай бұрын

    When will your Next.js course be released? Is there any mock project for it?

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    October 31. Make sure you’re on the email newsletter :) There will be 10 top-tier projects

  • @ekchills6948
    @ekchills69487 ай бұрын

    Wow!

  • @DeepakSankhyan
    @DeepakSankhyan7 ай бұрын

    oh cool

  • @AskarZhaanbaev-kz1do
    @AskarZhaanbaev-kz1do5 күн бұрын

    thank you, Toji Zenin

  • @asadmehboob1300
    @asadmehboob13007 ай бұрын

    please also make video on Tanstack table with server side pagination , searching, filtering, sorting, you are genious

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Good idea

  • @abdulrafay1951
    @abdulrafay19517 ай бұрын

    do you have any tips for a developer who knows how to build stuff but can't market his service because of his introvert nature or simple issue, maybe a video on this? It would be great.

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Interesting idea

  • @pete531

    @pete531

    7 ай бұрын

    become extrovert

  • @williamcao5139
    @williamcao51397 ай бұрын

    Can you release early access your React/Next course, i can not wait to 30 Oct

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    Great to hear, I may do this in 1-2 weeks. If I do it, I will email everyone about it

  • @asadmehboob1300

    @asadmehboob1300

    7 ай бұрын

    @@ByteGrad yes please release , ty

  • @youtubepotatoe6685
    @youtubepotatoe66857 ай бұрын

    What solution to filter XSS attack when saving html ?

  • @Ss-zg3yj

    @Ss-zg3yj

    Ай бұрын

    Isn't it obvious? Or you just want to show how you can ask "smart" question?

  • @learncode5110
    @learncode51107 ай бұрын

    When React course is going to come? please use vite version in the course

  • @ByteGrad

    @ByteGrad

    7 ай бұрын

    October 31, yes Vite is included! 😀

  • @learncode5110

    @learncode5110

    7 ай бұрын

    Awesome 😄🔥🙏 please add industry type project in web app

  • @toastrecon
    @toastrecon7 ай бұрын

    Dude. This is $1,600 per year if you actually want to use it in a product. Seems a little steep! There's not even a kind of startup tier if you're trying to get something off the ground.

  • @raymondmichael4987

    @raymondmichael4987

    7 ай бұрын

    😢😢 that’s sad, I do follow this channel because of his teaching style on useful stuffs . But pushing expensive service which I can’t even try for free, sorry buddy. HARD PASS

  • @joul3018
    @joul30187 ай бұрын

    how about becoming a voice actor!

  • @javascriptes
    @javascriptes5 ай бұрын

    Great, but too expensive.