Ep49 - Insert image to Text Editor Javascript Source Code

Veröffentlicht am: 02 Juni 2020
auf dem Kanal: UI Monk
1,197
12

insert image on Text Editor Source Code:
https://drive.google.com/file/d/1e8CW...

Full tutorial of html editor from scratch html,css and js
   • 19th JavaScript Project - HTML editor...  


1. explain the html and css
2. add paragraph in html editor
1. call the button in js
2. add listener click to the button
3. run execCommand() to append html in editable div

3. add image to html editor and float left
1. call the button and input[type='file'] field in js by id
2. add click listener to the button
3. on click the button click the input[type='file'] field
4. add listener change on input[type='file'] field
5. create FileReader object
6. get the choosen file from input type='file' using its index
8. append the image using execCommand by reader.onload
9. read the file name in js by readAsDataURL()
10. abort the fileReader
11. if file is chosen then readAsDataURL()
4. add image to html editor and float right
1. same as above
2. change the FileReader() reference variable name
3. change variable name of choosenfile usin this.files[0]


Auf dieser Seite können Sie das Online-Video Ep49 - Insert image to Text Editor Javascript Source Code mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer UI Monk 02 Juni 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,197 Mal angesehen und es wurde von 12 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!