Rich Text Editor With Javascript | Step By Step Javascript Project

Подписаться 75 тыс.

Просмотров 61 тыс.

50% 1

Create rich text editor that allows the user format and style text with a variety options using HTML, CSS and Javascript.
📁 Download Source Code :
www.codingartistweb.com
----------
00:00 Intro
00:05 Demo
04:34 HTML & CSS
25:08 Step 1: Create Initial References
29:03 Step 2: Create Initializer()
30:52 Step 3: Function To Highlight Clicked Buttons
35:15 Step 4: Function To Remove The Highlight
36:31 Step 5: Adding Options To Dropdown
39:07 Step 6: Create ModifyText(0
40:00 Step 7: Adding Event Listerners To The Buttons
----------
⭐ Exciting coding quizzes on my website:
bit.ly/382LIs6
----------
Email:
mitali@codingartistweb.com
Instagram:
/ coding.artist
----------
🎵Music:
Track: Our Leaves in the Breeze - Artificial.Music [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Our Leaves in the Bree...
Free Download / Stream: alplus.io/our-leaves-breeze

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@TLTechbender 24 дня назад

Bro, this is fire!!!!!!!! The fact that you are doing everything from scratch absolutely blows my mind!!! Keep up the good work🔥🔥🔥

@archangel0137 Год назад

Thank you SO MUCH for putting this video online. knowing how to build this out from scratch is immensely useful and I will definitely get started learning this ASAP!

@stefanzivkovic4195 2 года назад

Never would of thought about a project like this... good video!

@FangerZero Год назад

I haven't watched the full video but I definitely plan to follow this guide to build my own. I wasn't sure where to begin and now I have a whole guide! Thank you lady!

@CodingArtist Год назад

Glad I could help!

@thedrew6905 6 месяцев назад

always good to learn how to code the basics! nice video!

@tiagoborges5108 Год назад

Congratulations for the video is great; to be perfect is only missing the adding of photos to be complete and to learn more about that.

@andersoncdz1 Год назад

It was a really awesome project!!!!

@astokum7 2 года назад

Nice project you have made.

@atulpardhinitr190 4 месяца назад

if i store formatted text applied using this texteditor in backend will it save all the formatting or loose the formating

@yazilimci_adam Год назад

Thank you very much !

@hichamaboutaleb8130 2 года назад

Thanks 👍👍

@arcideas697 Год назад

U explained very well.... But I didn't understand.... Need to watch again 😊😊😊😊

@kingqcoc4333 11 месяцев назад

how to get value 'html' of it to add database?

@santoshpanda926 День назад

This is awesome

@OsmanKaanKars Год назад

can we add download & save buttons ?

@interstellarcreative Год назад

is there a way to edit the fonts?

@alieifrahim684 2 месяца назад

thank you so much ma'am

@kingqcoc4333 11 месяцев назад

thank you so much, I have downloaded the code, 1.000 like

@w2og3m 21 день назад

Can u help me with a short answer here? How can I save the created file as .doc or a word document type of file?

@dextrdemn6054 10 месяцев назад

now maximum commands of document.execCommand are not working now what to do?

@faizanshaikh2351 Год назад

Can you plz explain me why we want onload in this situation

@sai7743 11 месяцев назад

can we implement this in react typescript -this code

@MattiaRuberto 10 месяцев назад

Amazing video but execCommand is deprecated. Alternatives?

@DkboyStudios 8 месяцев назад

Please add an ability where images can be embedded. And please how to save this in SQL.

@hungchip 4 месяца назад

If you can upgrade this Theme adds part 2. Using emotes, insert the image into the input box and display it on the left 1 pane. I think it will be wonderful. And you can even upgrade it to part 3. How to import data into the Database and get it out of the Database for display. And more than that, it is security that prevents users from being able to edit the source code to arbitrarily pass basic checks or sabotage the Client-side source code to corrupt the system. (I think this part 4 will be for experts only). But.. I can only write those things, I absolutely cannot do part 2 or part 3 by myself. So, I hope you can do part 2 and part 3 if you have time.

@krlchki7883 Месяц назад

for part 3 use PHP and MySQL

@aasthasaxena1237 Год назад

how to store this Text Data in HTML format

@WG26Gaming 8 месяцев назад

hey i wants to copy the modified text and save it to the server (mySql) and when it is fetched it gets nice and tidy like it was before saving it to the database, can you tell me how can i do it

@esteban_9049 2 месяца назад

you can do it by saving it as html. Whenever you make a change with this editor the line ends up wrapped by a , just save it as a long string and let it be readed as html in the frontend .

@WG26Gaming 2 месяца назад

@@esteban_9049 thanks for the help brother, but i already did it 6 months back 😊😊

@hichamaboutaleb8130 2 года назад

👍👍

@SvenskaSwedish Год назад

Very nice, but I couldn't find the source codes, If you talk when you do it will be better

@vivekanandareddymaddela Год назад

Is it possible to save as PDF ?

@hichamaboutaleb8130 2 года назад

👍

@harshitshetty6306 6 месяцев назад

I didnt get a source code plz tell me where can i get this code

@rafabenato6893 11 месяцев назад

Great video. Is there a way of saving the edit text to a database and retriving it later? Thank you so much.

@MattiaRuberto 10 месяцев назад

Yep! You can set the form action to a php page and save the editor's content into a mysql db.

@ayushmanmanishankar1289 7 месяцев назад

use localSrotage to save it no need to use any runtime environment like node or php

@supremecoding632 2 года назад

awesome 👍🆒

@CodingArtist 2 года назад

Thank you!

@PedroHenrique-pv8rm Год назад

hi, I liked the video, I have a question, is there a way to make an editor with textarea?

@modrn_ Год назад

Hey there, it has to be a contenteditable div to work. Textareas do not have the same flexibility.

@Deus-lo-Vuilt Год назад

wow nice

@CodingArtist Год назад

Thanks

@khashayarghavami7573 Год назад

nice

@CodingArtist Год назад

Thanks

@JHRCREATOR 2 года назад

❤️❤️

@garvitbansal9353 3 месяца назад

Nice project but using execCommand is not a good idea as it is depreceated and most probably will be removed in future updated browser which will cause the project to not working properly...Other wise great idea!

@Dongamoham.18 4 месяца назад

Is that responsive bro?? I mean is it for all devices

@rajatgupta9743 Год назад

why you use highlighter in javascripts can u explain ??

@CodingArtist Год назад

Which highlighter?

@friendlyapk Год назад

blog is useless without images! like your video!

@hichamaboutaleb8130 2 года назад

Call video like zoom please 🙏

@celestialblink3308 2 года назад

execCommand() is deprecated

@CodingArtist 2 года назад

Yes. But it is supported in all browsers: developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#browser_compatibility

@w2og3m Год назад

Bell@

@kacper4267 Год назад

i have problem with that. It does not work with textarea as writting area but i need textarea in this form. Second issue i have with that when i use any button my form is trying to upload. Someone know how to solve that problem?

@PedroHenrique-pv8rm Год назад

i have the same problem

@roster6292 Месяц назад

I think textarea required form teg but we don't need form teg here. contenteditable="true" its use to edit the content of the teg. and about second problem you mention check if then you should change it to . thank you😊😊.

@The02139 2 года назад

Hey Good job. Do you know if execCommand() is still recommended for real projects? I have read that is deprecated, not at all, but maybe in the future Thank you.

@CodingArtist 2 года назад

It was the easiest way to implement the functionality. Also it is supported in all browsers: developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#browser_compatibility

@The02139 2 года назад

@@CodingArtist Thank you