How to do WYSIWYG with jQuery?

Question

JavaScript

Explain on your fingers how to make a simple vizivig editor like TinyMCE or CKEditor. I am interested in the idea without all the subtleties. Thank you.

Answer 1

You need to use the designMode document property. You can open a document in designMode in an iframe.
Something like this: in the code, the parser eats "<" and ">" ( I once wrote WYSIWYG from scratch, if necessary I can look for the source code.
document.writeln(' iframe id="' + editor + '" /iframe ');
var edit = document.getElementById(editor).contentWindow.document;
edit.designMode = "On";


Answer 2

There was an idea to write a short article, presenting the simplest editor in 2 KB using jQuery, but then I scored (the editor itself is, too lazy to design). If you are interested, I will give the code in a personal correspondence.

Answer 3

you can still dig into the imperavi sources

Answer 4

When I was tinkering with this, I didn’t really like the designMode option - an abundance of left tags, difficulties with their overlap, and the like. I end up leaning towards creating and positioning various inputs and styling them to match the element being edited.
And Googledocs, as far as I remember, simply catch the events of pressing the keyboard keys, substituting them with javascript in the place where the cursor is set. The cursor, by the way, is also drawn there manually - it is not native.

Answer 5

Have a look at imperavi . Maybe you don't need to write anything. And if necessary, the license is open there, you can see the implementation and finish it or make your own with blackjack.

Answer 6

+1 for imperavi. Most understandable code. Best for studying.
But the idea of ​​writing CKEditor is obviously unhealthy - you will drown in cross-browser.
The same imperavi has to be finished

Answer 7

I wrote my own WYSIWYG though it doesn't fully work in IE yet, but it's enough for my purposes.
github.com/un1t/pencil
The code is small, easy to understand. It’s hard to write, visivig yourself, but to finish someone else’s is even more difficult. If you fix a couple of broken moments in IE, then you can use it quite normally.
If you want, you can help me finish it.

Answer 8

nicEdit. You can select the elements that will be displayed on the panel. If you still want to reinvent the wheel, look at its sorts and write in jquery (although the option is not very good, jquery as an additional dependency ...)

Answer 9

Here's an article to get you started: blog.whatwg.org/the-road-to-html-5-contenteditable

Answer 10

If you are interested in seeing the source code, you can dig into our monster github.com/Studio-42/elRTE

Answer 11

Guys, I recently came across a site where it is written how easy it is to implement this wysing. To be honest, I was delighted.
Here is the link: www.pvsm.ru/javascript/24443 . Or the same: https://habr.com/post/161715/ .