basic idea to implement a WYSIWYG editor

Question

I am trying to build a very simple WYSIWYG editor for Webpage, and the only required function is to add the emotion icons into the text area such that the image itself is displayed.

However, I couldn't figure out how to display the pictures in the text area of the WYSIWYG editor, and I am really curious about how this actually works. Can someone please explain the high-level idea about the techniques required? Thanks. :)

Answer 1

The keyword is contenteditable. All WYSIWYG editors are based on an element with this attribute set to true.

Create a page with: <div contenteditable="true">foo! foo!</div> and open it on any of browsers. This div will be editable - you can type in it, press enter, press ctrl+b, etc.

It may look that you are already close to the final solution, but... not. You will soon notice that every browser is creating markup differently, that markup created on one browser and loaded to another doesn't work, the enter key sometimes work and sometimes not, pasting causes a looot of mess, Webkit based browsers creates hundreds of spans, etc, etc.

And even implementing inserting emoticons won't be so easy.

You need to read about commands and document.execCommand() method. You should probably focus on insertHTML command, which will be helpful when inserting images.

But if you care about the output HTML and UX, I advice you to use one of existing WYSIWYG editors (e.g. CKEditor which I'm a core developer ;). You don't have a big choice here too, because most of WYSIWYG editors, except just a few (2-3) main ones, heavily uses native contenteditable implementation, so they are so broken as it is. But the best editors fix hundreds of these issues making the contenteditable really usable.

Answer 2

Assuming you will be using jQUery to insert images, You can look at jquery wysiwyg editor https://github.com/akzhan/jwysiwyg to understand it better and can also use the same code (instead of H1, H2 and similar controls, you can use your emoticon images. It is very simple considering there is only one.

Check https://github.com/akzhan/jwysiwyg#quick-start to understand it better how it works