This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- 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
I highly recommend to check out the complete Froala tutorial here: th-cam.com/video/F33xZWXlCEo/w-d-xo.html
Check out the Froala website here: tinyurl.com/ByteGradFroala
Hey, can you handle SSR in nextjs 14? I have never understood it clearly.
I had a Froala Text Editor license for a time, never updated to it, the licence price are too much expansive !
Thanks for the heads up buddy, you saved me 18 minutes of watching this video 😊
😁😁😁😁@@raymondmichael4987
Wow, this is great, im gonna build something simple just to get my hands busy with this
Awesome tutorial 🤩
Thank you 😁
Thank you😊
Thnkas for the videos, waiting for your react + nexjs course
Coming soon! 😉
This is great - does it support youtube vid uploads directly into the "blog"?
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?
Great idea
Can I use server actions with this text editor to create post req etc ?
Nice nice nice!!🔥
Inline editor is a very good feature for front end editing, wow
How to edit the text written in Froala editor with the same formats, that was later stored in db?
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?
the example that you provided in the next.js starter has styles totally misplaced, how to fix it?
Can you make video use effect depending array warning error
Is there not an open source library, react-markdown or something that does all of that?
Can I give specific id to h1 tags in this text editor?
Hi Byte!
Please also add pagination, infinite scrolling and filtering in your Nextjs course
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 😢😢❤
Awesome
awesome
Hi @ByteGrad,
Will you be adding Tailwind CSS for Professional CSS course present in Udemy?
Yes
When new course? It will be available in Udemy?
October 31! Only available on ByteGrad.com - make sure you’re subscribed to the email list
Sir !, Could you make a video about how to generate PDF file from server action?
When will your Next.js course be released?
Is there any mock project for it?
October 31. Make sure you’re on the email newsletter :) There will be 10 top-tier projects
How much for next js course?
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!!
What solution to filter XSS attack when saving html ?
Isn't it obvious? Or you just want to show how you can ask "smart" question?
Wow!
my favorite ASMR developer
thank you, Toji Zenin
please also make video on Tanstack table with server side pagination , searching, filtering, sorting, you are genious
Good idea
oh cool
Can you release early access your React/Next course, i can not wait to 30 Oct
Great to hear, I may do this in 1-2 weeks. If I do it, I will email everyone about it
@@ByteGrad yes please release , ty
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.
Interesting idea
become extrovert
When React course is going to come? please use vite version in the course
October 31, yes Vite is included! 😀
Awesome 😄🔥🙏 please add industry type project in web app
If you are using NEXT JS 14 you might encounter error in production or during build time about => `ReferenceError: Element is not defined
Solution:
import React from "react";
const FroalaEditorForm = dynamic(() => import("./FroalaEditorForm"), {
ssr: false,
});
import dynamic from "next/dynamic";
export default function page() {
return ;
}
FroalaEditorForm.tsx:
"use client";
import React, { Suspense, useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "froala-editor/css/plugins/colors.min.css";
import "froala-editor/css/plugins/code_view.min.css";
import "froala-editor/css/plugins/emoticons.min.css";
import "froala-editor/css/plugins/special_characters.min.css";
import "froala-editor/js/plugins/align.min.js";
import "froala-editor/js/plugins/char_counter.min.js";
import "froala-editor/js/plugins/lists.min.js";
import "froala-editor/js/plugins/font_size.min.js";
import "froala-editor/js/plugins/line_height.min.js";
import "froala-editor/js/plugins/link.min.js";
import "froala-editor/js/plugins/colors.min.js";
import "froala-editor/js/plugins/inline_style.min.js";
import "froala-editor/js/plugins/code_view.min.js";
import "froala-editor/js/plugins/emoticons.min.js";
import "froala-editor/js/plugins/special_characters.min.js";
import "froala-editor/js/plugins/quote.min.js";
import dynamic from "next/dynamic";
const FroalaEditorComponent = dynamic(() => import("react-froala-wysiwyg"), {
ssr: false,
});
// import FroalaEditorView from "react-froala-wysiwyg/FroalaEditorView";
const FroalaEditorForm = () => {
const {
register,
handleSubmit,
control,
formState: { errors },
} = useForm();
const onSubmit = (data: any) => console.log(data);
console.log(errors);
const options = {
toolbarButtons: {
moreText: {
buttons: [
"bold",
"italic",
"underline",
"strikeThrough",
"subscript",
"superscript",
// "fontFamily",
"fontSize",
"textColor",
"backgroundColor",
"inlineClass",
"inlineStyle",
"clearFormatting",
],
},
moreParagraph: {
buttons: [
"align",
"formatOL",
"formatUL",
// "paragraphFormat",
// "paragraphStyle",
"lineHeight",
"outdent",
"indent",
"quote",
],
},
moreRich: {
buttons: [
"insertLink",
"insertHR",
"specialCharacters",
"emoticons",
//
// "insertImage",
// "insertVideo",
// "insertTable",
// "fontAwesome",
// "embedly",
// "insertFile",
],
},
moreMisc: {
buttons: [
"undo",
"redo",
// "fullscreen",
// "print",
// "getPDF",
// "spellChecker",
"selectAll",
"html",
// "help",
],
align: "right",
buttonsVisible: 2,
},
},
pluginsEnabled: [
"align",
"charCounter",
// "fontFamily",
"fontSize",
"lists",
"lineHeight",
"link",
"colors",
"inlineStyle",
"codeView",
"emoticons",
"specialCharacters",
"quote",
],
// charCounterMax: 140,
// fontFamily: {
// "sora,sans-serif": "sora",
// "Roboto,sans-serif": "Roboto",
// "Oswald,sans-serif": "Oswald",
// "Montserrat,sans-serif": "Montserrat",
// "'Open Sans Condensed',sans-serif": "Open Sans Condensed",
// },
inlineStyles: {
"Big Red": "font-size: 20px; color: red;",
"Small Blue": "font-size: 14px; color: blue;",
},
// fontFamilySelection: ["true"],
heightMax: 450,
};
return (
Title of Blog:
Writer Name:
Category Name:
Blog Area:
(
)}
/>
Submit
);
};
export default FroalaEditorForm;
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.
😢😢 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
how about becoming a voice actor!
Great, but too expensive.
Dear Froala team, we don't use paid text editors. thanks for open source community