Prodigy of Head | Make Simple Editing Editor use Attribute Contenteditable

Link to Tutorial Blog for Stylish Blogger

Make Simple Editing Editor use Attribute Contenteditable

Posted: 20 Feb 2014 01:22 AM PST

Beginilah kalau sedang tidak ada aktifitas. Sobat masih ingat dengan artikel merubah browser menjadi seperti notepad? Ternyata ada satu attribute HTML5 yang digunakan yaitu contenteditable Atribut contenteditable memiliki fungsi yakni menentukan apakah isi dari elemen dapat diedit atau tidak. Cari referensi sendiri² mengenai hal itu, banyak kok library web yg menerangkan ;)) Berikut alakadar link sources:

What is the Specific of Contenteditable!
html5demos.com/contenteditable
developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
akatov.github.io/angular-contenteditable
www.hongkiat.com/blog/html5-editable-content
codepen.io/matt-west/full/gtruC
simonewebdesign.it/blog/how-to-make-browser-editor-with-html5-contenteditable

Ada satu yg menggelitik dan kelupaan sama gue nih ;)) AA baca mengenai CSS live editing editor snippet dari www.webdeveloperjuice.com/2013/12/23/css-live-editing-editor-snippet Ketika melakukan penulisan bahasa CSS secara inline styles, kita dapat melakukan perubahan seketika. Berikut demo supaya jelas...

Result

My Blog

Edit Here

Coba gantikan value yg berada pada kotak Edit Here?

<p><a class="link" title="Tutorial Blog for Stylish Blogger" href="http://beben-koben.blogspot.com/">My Blog</a></p>
<style>
a.link {font-size: 21px;text-align: center;padding: 20px;display: block;}
.editable {display: block;font-size: 15px;color: #333;padding: 10px;border: 2px dashed #ccc;font-family: 'Courier New',Courier,sans-serif;white-space: pre-wrap;max-height: 212px;overflow: auto}
.editable:focus {outline: none;border: 2px solid #ccc;}
</style>
<style class="editable" contenteditable="">a.link { 
   color: #038;
   border: 2px dashed gray;
   background: lightgray; 
}</style>

Ternyata atribut contenteditable jugalah yg mendasari terciptanya Rich-Text Editing. Buka halaman berikut, scroll ke bawah dan dapatkan source kode rich-text editor example developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Bonus:
templatespicy.com/20-best-free-blogger-templates-2014

Happy contenteditable \m/