Editable Content dan ExecCommand

10:22 PM
Beberapa orang berpikir bahwa untuk membuat CMS sendiri perlu library dan semacamnya agar hasilnya bukan hanya "teks biasa". Padahal. Javascript dan HTML sudah menyediakan atribut contenteditable dan method document.execCommand() yang akan berguna untuk memformat tampilan tulisan dan menambahkan link, list atau gambar. Berikut ini adalah contoh sederhana dari penggunaan editable content tanpa script. 
<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
    <div style="width:400;height:400;background:yellow;border:1px solid red" contenteditable >
        Klik dan Ketik Sesuatu di sini!
    </div>
</BODY> 
</HTML>
Saat kita menggunakan contenteditable, kita juga bisa menggunakan ExecCommand. Contohnya :
<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <script>
        window.onload=function(e){
            document.getElementById("editor").focus();
        }
        function ubah(s){
            document.execCommand(s);
            document.getElementById("editor").focus();
        }
    </script>
</HEAD>
<BODY>
    <Button onclick="ubah('bold')">Bold</Button><BR />
    <div id="editor" style="width:400;height:400;background:yellow;border:1px solid red" contenteditable >
        Klik dan Ketik Sesuatu di sini!
    </div>
</BODY> 
</HTML>

Contoh di atas menggunakan tombol untuk mengubah teks yang diblok agar menjadi tebal / bold. Untuk melihat hasilnya, blok teks yang akan diubah, kemudian ekan tombol yang ada!
 ExecCommand bisa menggunakan satu atau tiga argument. Misalnya, pada contoh di atas, kita hanya menggunakan satu argumen yaitu bold. Beberapa argumen seperti backColor, foreColor, link, insertImage, dll; perlu nilai yang bisa ditambahkan pada argumen ke tiga.
<HTML>
<HEAD>
    <title>Belajar HTML</title>
    <script>
        window.onload=function(e){
            document.getElementById("editor").focus();
        }
        function ubah(s){
            document.execCommand("ForeColor", false, s);
            document.getElementById("editor").focus();
        }
    </script>
</HEAD>
<BODY>
    <Button onclick="ubah('red')">Ubah jadi merah!</Button><BR />
    <div id="editor" style="width:400;height:400;background:yellow;border:1px solid red" contenteditable >
        Klik dan Ketik Sesuatu di sini!
    </div>
</BODY>
</HTML>
Beberapa nilai dari argumen pertama yang bisa digunakan tanpa argumen lain adalah sebagai berikut :
  1. bold
  2. italic
  3. underline
  4. list
  5. redo
  6. selectAll
  7. strikeThrough
  8. subscript
  9. superscript
  10. unlink
  11. justifyLeft
  12. justifyCenter
  13. justifyFull
  14. insertOrderedList
  15. insertUnorderedList
Untuk nilai lain yang bisa diberikan, silakan lihat di sini :

Subscribe to: Post Comments (Atom)