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

Рет қаралды 30,323

Күн бұрын

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 released at any moment to email subscribers: email.bytegrad.com
👉 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 7 ай бұрын

I highly recommend to check out the complete Froala tutorial here: kzfaq.info/get/bejne/fJljq72IvdKndaM.html Check out the Froala website here: tinyurl.com/ByteGradFroala

@electroheadfx 7 ай бұрын

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

@raymondmichael4987 7 ай бұрын

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

@mahdimotallebi7207 7 ай бұрын

😁😁😁😁@@raymondmichael4987

@maskman4821 7 ай бұрын

Awesome tutorial 🤩

@ByteGrad 7 ай бұрын

Thank you 😁

@nickbubuioc 7 ай бұрын

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

@ByteGrad 7 ай бұрын

Coming soon! 😉

@pete531 7 ай бұрын

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

@nickderaj 7 ай бұрын

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

@jarnoojasaar 5 ай бұрын

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

@7doors847 7 ай бұрын

Nice nice nice!!🔥

@jeremydiaz6494 7 ай бұрын

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?

@john_dren 7 ай бұрын

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 7 ай бұрын

Great idea

@pixyoutube538 7 ай бұрын

Thank you😊

@zunnoorainrafi5985 7 ай бұрын

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

@darelbvcr687 7 ай бұрын

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

@hlugdandukka 7 ай бұрын

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

@smoothoperatah 23 күн бұрын

my favorite ASMR developer

@murilodemeloreis3175 3 ай бұрын

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

@ethaneth6481 6 ай бұрын

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

@webdevpersion 7 ай бұрын

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 😢😢❤

@maxtsh 7 ай бұрын

Awesome

@maheshadusumilli7833 7 ай бұрын

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

@ByteGrad 7 ай бұрын

Yes

@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 7 ай бұрын

awesome

@vanithb6630 7 ай бұрын

Can you make video use effect depending array warning error

@AskarZhaanbaev-kz1do 9 сағат бұрын

thank you, Toji Zenin

@movietime8403 6 ай бұрын

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

@DeepakSankhyan 7 ай бұрын

oh cool

@ekchills6948 7 ай бұрын

Wow!

@juniorsemerzier660 7 ай бұрын

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

@somebody-17546 7 ай бұрын

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

@ByteGrad 7 ай бұрын

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

@pastuh 7 ай бұрын

When new course? It will be available in Udemy?

@ByteGrad 7 ай бұрын

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

@Foused87 7 ай бұрын

How much for next js course?

@asadmehboob1300 7 ай бұрын

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

@ByteGrad 7 ай бұрын

Good idea

@williamcao5139 7 ай бұрын

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

@ByteGrad 7 ай бұрын

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

@asadmehboob1300 7 ай бұрын

@@ByteGrad yes please release , ty

@learncode5110 7 ай бұрын

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

@ByteGrad 7 ай бұрын

October 31, yes Vite is included! 😀

@learncode5110 7 ай бұрын

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

@abdulrafay1951 7 ай бұрын

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 7 ай бұрын

Interesting idea

@pete531 7 ай бұрын

become extrovert

@youtubepotatoe6685 7 ай бұрын

What solution to filter XSS attack when saving html ?

@Ss-zg3yj Ай бұрын

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

@toastrecon 7 ай бұрын

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 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