Öncelikle WYSIWYG nedir, bunu öğrenelim..
WYSIWYG, uzun adıyla What You See Is What You Get kısaltması olup türkçe karşılığı “Ne Görüyorsan Onu Alırsın” dır..
Bunda olay, editörde yazdığınızı çıktı aldığınızda neredeyse birebir benzerlikte olmasıdır.. [Kaynak: Wikipedia]
Bir nesnenin düzenlenebilir olması için contenteditable niteliği eklenmelidir..
<div style="width: 100px; height: 100px; border: 1px solid #ddd" contenteditable="true">bu yazı düzenlenebilir..</div>
Düzenlenebilir nesneye komut uygulamak için execCommand() metodu kullanılır.. Mevcut komutların tüm listesini aşağıdaki bağlantıdan görüntüleyebilirsiniz;
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands