Advanced rich text input
While the basic contentEditable
-based rich text input field is sufficient in most cases, sometimes it is not enough. We might want to allow the users to insert more complex objects such as images and tables.
In this recipe, we're going to make an advanced rich text editor that supports inserting images and basic tables.
We're going to build this editor based on the simple rich text editor demonstrated in the Using contentEditable for basic rich text input recipe.
Getting ready
We're going to start with the code from the Using contentEditable for basic rich text input recipe and improve upon it.
How to do it...
Let's write the code.
We're going to take the original
index.html
andexample.js
files but we will modify the HTML file. We're going to add two controls: a table button and a file picker to insert images:<!DOCTYPE HTML> <html> <head> <title>Simple rich text editor</title> <style type="text/css"> ...