I highly recommend to check out the complete Froala tutorial here: ua-cam.com/video/F33xZWXlCEo/v-deo.html Check out the Froala website here: tinyurl.com/ByteGradFroala
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?
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
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!!
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?
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.
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 😢😢❤
I highly recommend to check out the complete Froala tutorial here: ua-cam.com/video/F33xZWXlCEo/v-deo.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
Thnkas for the videos, waiting for your react + nexjs course
Coming soon! 😉
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
Wow, this is great, im gonna build something simple just to get my hands busy with this
Inline editor is a very good feature for front end editing, wow
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
Awesome tutorial 🤩
Thank you 😁
Nice nice nice!!🔥
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!!
Thank you😊
my favorite ASMR developer
please also make video on Tanstack table with server side pagination , searching, filtering, sorting, you are genious
Good idea
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
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?
Can you make video use effect depending array warning error
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
the example that you provided in the next.js starter has styles totally misplaced, how to fix it?
Dear Froala team, we don't use paid text editors. thanks for open source community
Hi Byte!
Please also add pagination, infinite scrolling and filtering in your Nextjs course
This is great - does it support youtube vid uploads directly into the "blog"?
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
Awesome
How to edit the text written in Froala editor with the same formats, that was later stored in db?
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 😢😢❤
Sir !, Could you make a video about how to generate PDF file from server action?
Hi @ByteGrad,
Will you be adding Tailwind CSS for Professional CSS course present in Udemy?
Yes
thank you, Toji Zenin
Is there not an open source library, react-markdown or something that does all of that?
Wow!
awesome
Can I give specific id to h1 tags in this text editor?
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
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
oh cool
How much for next js course?
Can I use server actions with this text editor to create post req etc ?
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;
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?
how about becoming a voice actor!
Great, but too expensive.