Rich Text Editor With Javascript | Step By Step Javascript Project

Поділитися
Вставка
  • Опубліковано 17 лис 2024

КОМЕНТАРІ • 74

  • @TLTechbender
    @TLTechbender 6 місяців тому +4

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

  • @FangerZero
    @FangerZero Рік тому +5

    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!

  • @archangel0137
    @archangel0137 Рік тому +5

    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!

  • @shreyasshinde3990
    @shreyasshinde3990 Місяць тому

    Really worth watching this video. I saw your website also. I really appreciate your efforts, it helps a lot to the coder community.

  • @arcideas697
    @arcideas697 Рік тому

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

  • @w2og3m
    @w2og3m 6 місяців тому

    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?

  • @thedrew6905
    @thedrew6905 11 місяців тому

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

  • @stephenbrooks1898
    @stephenbrooks1898 4 місяці тому

    This is a shorter version of create icons:
    $(document).ready(function() {
    var icons = ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript',
    'list-ol', 'list', 'rotate-left', 'rotate-right', 'link'
    ];
    var container = $('');
    var options = $('');
    icons.forEach(item => {
    var button = $('', {
    id: item,
    class: 'option-button format',
    html: ``
    });
    options.append(button);
    });
    container.append(options);
    $('body').append(container);
    });

  • @sobrehombre9338
    @sobrehombre9338 3 місяці тому

    Thanks!

  • @hichamaboutaleb8130
    @hichamaboutaleb8130 2 роки тому +3

    Thanks 👍👍

  • @xaydungxuanphat
    @xaydungxuanphat Рік тому

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

  • @ДмитрийБатищев-п1х
    @ДмитрийБатищев-п1х 3 місяці тому

    Hello, bro! What about the fact that the execCommand is now in the depricated state. Any issues?

  • @santoshpanda926
    @santoshpanda926 5 місяців тому

    This is awesome

  • @atulpardhinitr190
    @atulpardhinitr190 9 місяців тому

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

  • @mutiaraayur5119
    @mutiaraayur5119 2 місяці тому

    MANTAPP BANGG

  • @alieifrahim684
    @alieifrahim684 7 місяців тому

    thank you so much ma'am

  • @李俊奇-d3o
    @李俊奇-d3o 5 місяців тому

    赏心悦目

  • @MattiaRuberto
    @MattiaRuberto Рік тому

    Amazing video but execCommand is deprecated. Alternatives?

  • @hungchip
    @hungchip 10 місяців тому

    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
      @krlchki7883 7 місяців тому

      for part 3 use PHP and MySQL

  • @yazilimci_adam
    @yazilimci_adam Рік тому

    Thank you very much !

  • @WG26Gaming
    @WG26Gaming Рік тому +2

    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
      @esteban_9049 8 місяців тому

      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
      @WG26Gaming 8 місяців тому

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

  • @PedroHenrique-pv8rm
    @PedroHenrique-pv8rm 2 роки тому +3

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

    • @modrn_
      @modrn_ 2 роки тому +1

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

  • @andersoncdz1
    @andersoncdz1 2 роки тому +1

    It was a really awesome project!!!!

  • @astokum7
    @astokum7 2 роки тому +1

    Nice project you have made.

  • @dextrdemn6054
    @dextrdemn6054 Рік тому

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

  • @tiagoborges5108
    @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.

  • @OsmanKaanKars
    @OsmanKaanKars 2 роки тому +2

    can we add download & save buttons ?

  • @SvenskaSwedish
    @SvenskaSwedish 2 роки тому +1

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

  • @DkboyStudios
    @DkboyStudios Рік тому

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

  • @faizanshaikh2351
    @faizanshaikh2351 Рік тому

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

  • @rafabenato6893
    @rafabenato6893 Рік тому

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

    • @MattiaRuberto
      @MattiaRuberto Рік тому

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

    • @ayushmanmanishankar1289
      @ayushmanmanishankar1289 Рік тому

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

  • @sai7743
    @sai7743 Рік тому

    can we implement this in react typescript -this code

  • @harshitshetty6306
    @harshitshetty6306 Рік тому

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

  • @Dongamoham.18
    @Dongamoham.18 10 місяців тому

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

  • @interstellarcreative
    @interstellarcreative Рік тому +1

    is there a way to edit the fonts?

  • @xaydungxuanphat
    @xaydungxuanphat Рік тому +1

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

  • @supremecoding632
    @supremecoding632 2 роки тому +2

    awesome 👍🆒

  • @friendlyapk
    @friendlyapk 2 роки тому +1

    blog is useless without images! like your video!

  • @vivekanandareddymaddela
    @vivekanandareddymaddela Рік тому

    Is it possible to save as PDF ?

  • @Trending_Songs_videos
    @Trending_Songs_videos 2 роки тому

    why you use highlighter in javascripts can u explain ??

  • @WeTechyBees
    @WeTechyBees 2 роки тому

    how to store this Text Data in HTML format

  • @garvitbansal9353
    @garvitbansal9353 8 місяців тому

    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!

    • @attilaguba856
      @attilaguba856 15 днів тому

      so what would you use instead of execCommand ?

    • @TotallyReliableDino
      @TotallyReliableDino 12 днів тому

      ​@@attilaguba856the text selection api I think

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 роки тому

    wow nice

  • @hichamaboutaleb8130
    @hichamaboutaleb8130 2 роки тому +4

    Call video like zoom please 🙏

  • @khashayarghavami7573
    @khashayarghavami7573 2 роки тому

    nice

  • @hichamaboutaleb8130
    @hichamaboutaleb8130 2 роки тому +3

    👍👍

  • @kacper4267
    @kacper4267 2 роки тому +2

    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
      @PedroHenrique-pv8rm 2 роки тому

      i have the same problem

    • @roster6292
      @roster6292 7 місяців тому

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

  • @JHRCREATOR
    @JHRCREATOR 2 роки тому +1

    ❤️❤️

  • @celestialblink3308
    @celestialblink3308 2 роки тому +1

    execCommand() is deprecated

    • @CodingArtist
      @CodingArtist  2 роки тому +1

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

  • @hichamaboutaleb8130
    @hichamaboutaleb8130 2 роки тому +2

    👍

  • @w2og3m
    @w2og3m Рік тому

    Bell@

  • @The02139
    @The02139 2 роки тому +3

    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
      @CodingArtist  2 роки тому +1

      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
      @The02139 2 роки тому

      @@CodingArtist Thank you