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

Рет қаралды 32,336

Күн бұрын

Complete Froala tutorial here: • React Tutorial: Create... (paid sponsorship)
Check out the Froala website: tinyurl.com/ByteGradFroala (paid sponsorship)
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 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 8 ай бұрын

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

@raymondmichael4987 8 ай бұрын

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

@mahdimotallebi7207 8 ай бұрын

😁😁😁😁@@raymondmichael4987

@pete531 8 ай бұрын

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

@maskman4821 8 ай бұрын

Awesome tutorial 🤩

@ByteGrad 8 ай бұрын

Thank you 😁

@jarnoojasaar 5 ай бұрын

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

@nickbubuioc 8 ай бұрын

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

@ByteGrad 8 ай бұрын

Coming soon! 😉

@pixyoutube538 8 ай бұрын

Thank you😊

@zunnoorainrafi5985 8 ай бұрын

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

@john_dren 8 ай бұрын

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

Great idea

@7doors847 8 ай бұрын

Nice nice nice!!🔥

@nickderaj 8 ай бұрын

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

@jeremydiaz6494 8 ай бұрын

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?

@darelbvcr687 8 ай бұрын

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

@vanithb6630 8 ай бұрын

Can you make video use effect depending array warning error

@murilodemeloreis3175 4 ай бұрын

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

@ethaneth6481 7 ай бұрын

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

@hlugdandukka 7 ай бұрын

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

@movietime8403 6 ай бұрын

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

@maxtsh 8 ай бұрын

Awesome

@sardor_tech 8 ай бұрын

awesome

@asadmehboob1300 8 ай бұрын

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

@ByteGrad 8 ай бұрын

Good idea

@juniorsemerzier660 8 ай бұрын

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

@smoothoperatah Ай бұрын

my favorite ASMR developer

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

@Foused87 7 ай бұрын

How much for next js course?

@maheshadusumilli7833 8 ай бұрын

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

@ByteGrad 8 ай бұрын

Yes

@joaoarthurbandeira 2 ай бұрын

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

@ekchills6948 8 ай бұрын

Wow!

@DeepakSankhyan 8 ай бұрын

oh cool

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

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

@ByteGrad 8 ай бұрын

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

@williamcao5139 8 ай бұрын

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

@ByteGrad 8 ай бұрын

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

@asadmehboob1300 8 ай бұрын

@@ByteGrad yes please release , ty

@abdulrafay1951 8 ай бұрын

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

Interesting idea

@pete531 8 ай бұрын

become extrovert

@AskarZhaanbaev-kz1do 22 күн бұрын

thank you, Toji Zenin

@learncode5110 8 ай бұрын

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

@ByteGrad 8 ай бұрын

October 31, yes Vite is included! 😀

@learncode5110 8 ай бұрын

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

@youtubepotatoe6685 8 ай бұрын

What solution to filter XSS attack when saving html ?

@Ss-zg3yj 2 ай бұрын

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

@toastrecon 8 ай бұрын

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

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